前言
导出excel插件的使用
一、安装插件
npm install file-saver --save
npm install script-loader --save -D
二、使用步骤
- 在src目录下新建一个vendor文件夹引入Export2Zip.js和Export2Excel.js文件,vue-elment-admin源码中有可提取
- 使用
// 表头关系,自定义
const headers = {
姓名: "username",
手机号: "mobile",
入职日期: "timeOfEntry",
聘用形式: "formOfEmployment",
转正日期: "correctionTime",
工号: "workNumber",
部门: "departmentName",
};
// 按需加载调用导出插件
import("@/vendor/Export2Excel").then(async (excel) => {
//excel中包含所有下面需要使用的方法
// 请求列表,获取所有要导出的数据
let { rows } = await getEmployeeList({
page: 1,
size: this.page.total,
});
// 处理数据格式,变为二维数组
let data = this.formatJson(headers, rows);
// 数据传入插件准备导出
excel.export_json_to_excel({
header: Object.keys(headers), //表头数组
data, //二维数组结构,必传,为导出的数据列表
filename: "员工信息列表", //文件标题
autoWidth: true, //列表宽度是否自适应
bookType: "xlsx", //生成文件类型后缀
});
});
将请求数据处理成二维数组的函数
// 数据处理为二维数组
formatJson(headers, rows) {
rows = rows.map((item) => {
return Object.keys(headers).map((key) => {
// 对是时间和聘用形式做处理
if (
headers[key] == "timeOfEntry" ||
headers[key] == "correctionTime"
) {
return formDate(item[headers[key]]);
}
if (headers[key] == "formOfEmployment") {
let en = engageModality.data.find((obj) => {
return item[headers[key]] == obj.id;
});
return en ? en.value : "未知";
}
return item[headers[key]];
});
});
return rows;
},