需求背景: 需要导出表格的数据,由于后端不提供导出接口,所以由前端通过JSON数据导出实现。
使用的插件:js-export-excel
安装: npm install js-export-excel
javascript
// 导入依赖
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();
};
使用:
js
// 自己的table 数据
exportFile (tableData, 'test');
亲测有用,只要前端能拿到的是表格全量数据,就能直接导出表格所有数据。但如果是后端分页查询的表格,前端每次只能查10条或20条的话,那当前每次也只能导出10条20条。不然的话需要前端存一下所有的数据才能一次导出所有,或者后端配合提供接口返回所有数据。