关于vue项目中导出excel表格数据,感觉还是有必要记一下。
一、需要安装三个依赖:
npm install -S file-saver xlsx
npm install -D script-loader
二、项目中新建文件夹(文件名excel)
里面放置两个文件Blob.js和 Export2Excel.js。
链接:https://pan.baidu.com/s/1dZCFNNHkJPLwUX0GpoiT8Q
提取码:1234
三、在vue的methods方法中
页面添加导出按钮,加入方法:
<Button type="primary" icon="el-icon-download" @click="exp" style="margin-left:20px">导出</Button>
// 此方法是下载数据到表格
exp() {
// 这里为请求axios并获得数据
EquipmentGetAll()
.then(res => {
if (res.data.state) {
this.exportList = res.data.data ? res.data.data : []
//请求成功后把要打印的数据赋值一下并调用export2Excel方法
this.export2Excel();
}
})
.catch(err => {
console.log(err);
});
},
export2Excel() {
require.ensure([], () => {
//这里引入刚才下载的Export2Excel.js包
const { export_json_to_excel } = require("../../../excel/Export2Excel");
//这里是excel表格头部字段
const tHeader = ["设备id", "设备编号", "设备名称", "设备型号"];
//这里是相对应头部字段的数据字段
const filterVal = ["equipmentID", "equipmentNum", "equipmentName","equipmentModel"];
//这里对数据进行遍历操作,修改数据的值
this.exportList.forEach((item, index, arr) => {
item.equipmentModel
? (arr[index].equipmentModel = "AB")
: (arr[index].equipmentModel = "CD");
});
const list = this.exportList;
//数据处理
const data = this.formatJson(filterVal, list);
//打印
export_json_to_excel(tHeader, data, "我的设备数据");
});
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]));
}
四、假如项目有很多个导出,每个都写就太麻烦了
一般情况下,都会封装一个工具类: