前端保留样式导出表格

最新推荐文章于 2024-08-26 16:38:21 发布

yummf

最新推荐文章于 2024-08-26 16:38:21 发布

阅读量109

点赞数 4

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_53911951/article/details/140208569

版权

import ReactHTMLTableToExcel from 'react-html-table-to-excel'

  //导出
  const handleExport = () => {
    const cloneDivNode = document.getElementById('antdTable').cloneNode(true);
    const table = document.createElement('table')
    table.appendChild(cloneDivNode);
    table.setAttribute('id', 'table-to-xls');
    document.getElementById('root').appendChild(table);
    document.getElementById('test-table-xls-button').click();
    setTimeout(() => {
      document.getElementById('root').removeChild(table);
    }, 500)
  };

 <table className={styles.tableBox} id='antdTable'></table>
 <ReactHTMLTableToExcel
     id="test-table-xls-button"
     className={styles.downloadtablexlsbutton}
     table="table-to-xls"
     filename='排版管理'
     sheet="tablexls"
/>
<Button className={styles.btnBox} type="primary" onClick={handleExport}>
    导出
</Button>