需求背景: 需要导出表格的数据,由于后端不提供导出接口,所以由前端通过JSON数据导出实现。
使用的插件:js-export-excel
安装: npm install js-export-excel
// 导入依赖const ExportJsonExcel = require('js-export-excel');/*** JSON数据-文件导出 *@param data [ 要导出的 object 数据]**/const exportFile = (data: any, fileName?: string) => {let sheetData = [];// 处理数据data.forEach((item) => {/** 表头为参考示例,请根据实际情况自定义* sheetHeader: [ '姓名', '年龄', '性别', '职业', '爱好'],* sheetData: [['name', 'age', 'gender', 'career', 'hobby']],**/sheetData.push([item.name,item.age,item.gender,item.career,item.hobby]);});// 导出文件配置const option: {fileName?: string;datas?: any;} = {};option.fileName = fileName || '文件名称'; // 自定义文件名option.datas = [{// 工作表名称sheetName: 'sheet',// 表头sheetHeader: [ '姓名', '年龄', '性别', '职业', '爱好'], // 自定义列宽columnWidths: [10, 5, 5, 5, 10],sheetData: sheetData,},];const toExcel = new ExportJsonExcel(option);//保存toExcel.saveExcel();};
使用:
// 自己的table 数据exportFile (tableData, 'test');
亲测有用,只要前端能拿到的是表格全量数据,就能直接导出表格所有数据。但如果是后端分页查询的表格,前端每次只能查10条或20条的话,那当前每次也只能导出10条20条。不然的话需要前端存一下所有的数据才能一次导出所有,或者后端配合提供接口返回所有数据。