vue+elementui项目中实现纯js导出excel

1.后台管理表格导出excel
本来是后端导的，因为跨域的问题，频频出错，所以只能自食其力，纯js实现excel的导出。

首先npm安装依赖

npm install -S file-saver xlsx
npm install -D script-loader

在src目录下新建excel文件夹，里面放入Blob.js和Export2Excel.js两个JS文件
链接: https://pan.baidu.com/s/1b7b23xX-XWQmvYUIhPFouA 密码: vxdi

接下来main.js引入

import Blob from "@/tools/Blob.js"
import Export2Excel from "@/tools/Export2Excel"

注意在Export2Exce.js中引入自己的路径

2.将数据导出
2.1首先请求后台数据

// 根据id初始化table
handleNodeClick(data) {
this.user_id = data.id;
let url = "api";
this.$http
.get(url, {
params: {
id: this.user_id
}
})
.then(res => {
this.tableData = res.data;
})
.catch(function(res) {});
},

这是后端返回来的字段。

//导出excel的信息集合
export2Excel() {
require.ensure([], () => {
const { export_json_to_excel } = require("../apis/Export2Excel.js");  //此处需要修改为自己的正确路径
// 设置自己的excel表头
const tHeader = [
"序号",
"姓名",
"电话",
"楼盘",
"录入时间",
"录入人",
"跟进时间",
"操作"
]; // 上面设置Excel的表格第一行的标题
const filterVal = [
"client_id",
"client_name",
"client_phone",
"enterer_id",
"enterer_time",
"estate_name",
"follow_up_time",
"user_name"
]; // client_id client_name client_phone 为tableData的属性
const list = this.tableData; //把data里的tableData存到list
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]));
}

成功…