react中使用保存table表格数据为excel表格文件,同时保存两个多个工作簿

保存table数据为excel表格文件

依赖包:npm install xlsx

引入:import XLSX from "xlsx";

使用:

	let workbook = XLSX.utils.book_new();

    let ws1 = XLSX.utils.table_to_sheet(document.getElementById("table1"));
    XLSX.utils.book_append_sheet(workbook, ws1, "Sheet1");

    let ws2 = XLSX.utils.table_to_sheet(document.getElementById("table2"));
    XLSX.utils.book_append_sheet(workbook, ws2, "Sheet2");

    XLSX.writeFile(workbook, "SheetJS.xlsx");

render内结构:

注释:这里为了演示同时生成两个工作簿,而视图上只显示一个,特意隐藏了一个表格

	<table id="table1" style={{display:"none"}}>
          <tbody>
            {this.state.data.map((item, index) => {
              return (
                <tr key={index}>
                  {item.map((ele, i) => {
                    return <th key={i}>{ele}</th>;
                  })}
                </tr>
              );
            })}
          </tbody>
        </table>
        <table id="table2">
          <tbody>
            {this.state.data.map((item, index) => {
              return (
                <tr key={index}>
                  {item.map((ele, i) => {
                    return <th key={i}>{ele}</th>;
                  })}
                </tr>
              );
            })}
          </tbody>
        </table>

视图显示

excel文件

注:这个依赖包很强大,保存为excel表格还有另外一个请求的方式可以实现(包括拖拽上传文件等很强大的一个excel处理库),这里就不再演示,感兴趣的同学可以去github上详细阅读一下使用说明,