关于react.js:reactant中table导出excel

1. 开发环境 react
2. 电脑系统 windows11 专业版
3. 在开发的过程中, 可能会须要导出 excel 文件, 上面我来分享一下办法, 心愿对你有所帮忙, 让咱们一起致力走向巅峰。
4.xlsx:

援用呼声最高的是 xlsx, 又叫 SheetJS, 也是下载量最高和 star 最多的库。试用了一下很弱小, 然而！默认不反对扭转款式, 想要反对扭转款式, 须要应用它的免费版本。

ExcelJS:

ExcelJS 周下载量 450k，github star 9k，并且领有中文文档，对国内开发者很敌对。尽管文档是以 README 的模式，可读性不太好，但重在内容，罕用的性能根本都有笼罩

5. 装置:

npm install exceljs

npm install file-saver

6. 外围代码:

// 导入
import * as ExcelJs from 'exceljs';
import {saveAs} from "file-saver";
import {Workbook} from "exceljs";
import {ColumnsType} from "antd/lib/table/interface";

// 办法
const generateHeaders = (columns) => {
        return columns?.map(col => {
            const obj = {
                // 显示的 name
                header: col.title,
                // 用于数据匹配的 key
                key: col.dataIndex,
                // 列宽
                width: col.width / 5 || 20
            };
            return obj;
        })
    }

    const saveWorkbook = (workbook, fileName) => {
        // 导出文件
        workbook.xlsx.writeBuffer().then((data => {const blob = new Blob([data], {type: ''});
            saveAs(blob, fileName);
        }))
    }

    const tableExport = (TableData,ColumnsData) => {
        // 创立工作簿
        const workbook = new ExcelJs.Workbook();
        // 增加 sheet
        const worksheet = workbook.addWorksheet('demo sheet');
        // 设置 sheet 的默认行高
        worksheet.properties.defaultRowHeight = 20;
        // 设置列
        worksheet.columns = generateHeaders(ColumnsData);
        // 增加行
        worksheet.addRows(TableData);
        // 导出 excel
        saveWorkbook(workbook, 'simple-demo.xlsx');
    }

// div 代码:
<Row gutter={24} justify={"end"}>
  <Button type="primary" onClick={()=>{tableExport(api_tableData,api_columns)
  }}> 导出 </Button>
</Row>
<Row gutter={24} style={{marginTop:10}}>
  <Table columns={api_columns} 
         dataSource={api_tableData} 
         style={{width: "100%"}} 
         pagination={false}
         scroll={{x: 'max-content'}}/>
</Row>

// 留神:tableExport 办法第一个参数是:table; 第二个参数是:columns

6- 1 效果图如下:

7. 本期的分享到了这里就完结啦, 心愿对你有所帮忙, 让咱们一起致力走向巅峰。