react+antd实现前端导出为excel功能
使用js-export-excel
安装插件
npm i js-export-excel
在需要的地方引入该模块
import ExportJsonExcel from 'js-export-excel';//excel表格导出
给导出按钮绑定事件
<Button type="primary" onClick={this.exportExcel}>导出</Button>
生成excel的代码
//数据导出
exportExcel = () => {
const datas = this.state.data ? this.state.data : '';//表格数据
var option = {};
let dataTable = [];//新建数组放数据
console.log(datas)
if (datas) {
for (const data of datas) {
console.log(data)
if (data) {
let obj = {
id: data.classid,
name: data.classname,
}
dataTable.push(obj);
}
}
}
console.log(dataTable)
option.fileName = '班级信息'//文件名
option.datas = [
{
sheetData: dataTable,//数据
sheetName: '班级信息',//sheet名字
// sheetFilter: [dataTable.id, dataTable.name],//列过滤
// sheetFilter 列过滤(只有在 data 为 object 下起作用)(可有可无)
sheetHeader: ["班级编号","班级名称"],//// 第一行
}
];
var toExcel = new ExportJsonExcel(option);
toExcel.saveExcel();//保存
}
详情可以参考官方文档:https://github.com/cuikangjie/js-export-excel