vue element ui table导出Excel表格
一、需要安装依赖:
cnpm install -S file-saver xlsx
cnpm install -D script-loader
二、项目中新建一个文件夹:(vendor---名字任取)
里面放置两个文件Blob.js 和 Export2Excel.js。
三、vue文件写入这俩个方法
export2Excel() {
require.ensure([], () => {
const { export_json_to_excel } = require("../../vendor/Export2Excel");
const tHeader = ["序号",
"IMSI", "MSISDN",
"证件号码", "姓名"];
//对应表格输出的title
const filterVal = ["ID",
"imsi", "msisdn",
"address", "name"];
// 对应表格输出的数据
const list =
this.tableData;
const data = this.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, "列表excel");
//对应下载文件的名字
})
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
}
四、按钮导出调用export2Excel方法
五、在build----webpack.base.conf.js中resolve的alias加入 "vendor": path.resolve(__dirname, "../src/vendor"),
vuedor请看第二条
- 上一篇: ElementUI之table排序
- 下一篇: js中对象属性值排序(字典倒排序)
