工作随笔（Vue结合element-ui实现下载表格功能）
方法一：
1.需要安装两个依赖：
npm install -S file-saver xlsx
npm install -D script-loader
2.项目中新建一个文件夹：（名字任取）
里面放置两个文件Blob.js和 Export2Excel.js，下载地址。
3.在.vue文件中
写这两个方法：其中list是表格的数据
export2Excel() {
require.ensure([], () => {
const { export_json_to_excel } = require('../../vendor/Export2Excel');
const tHeader = ['序号', 'IMSI', 'MSISDN', '证件号码', '姓名'];
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]))
}
4.按钮导出调用export2Excel方法
<button @click="export2Excel()">下载</button>
注：如果webpack报解析错误：在build----webpack.base.conf.js中resolve的alias加入
‘vendor’: path.resolve(__dirname, ‘…/src/vendor’),即可解决alias是配置别名
方法二：
1.获取表格的HTML内容
var html = '<html><head><meta charset="utf-8" /></head><body>' + document.getElementsByClassName("tableNew")[0].outerHTML+ "</body></html>"
2.blob方法转换页面内容
var blob = new Blob([html], { type: "application/vnd.ms-excel" })
3.获取到a标签，这里最好是a标签
var a = document.getElementById("downTab");
a.href = URL.createObjectURL(blob) //设置a标签的href为点击可下载的链接
a.download = "中介基本信息变更数据.xls"; //下载表格的名称
如果数据当中又过长的数字可能会出现这种情况
目前还不知道怎么解决，最后还是让后台写的接口，前台调用
学习的过程当中发现有很多坑，比如需要给表格添加颜色或者结构上的样式…
第一次写这种功能，做个笔记，保存下希望受用
675
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
