react+ant中table导出excel
1.开发环境 react2.电脑系统 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.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。
转载自:https://segmentfault.com/a/1190000042416581