对于涉及到数据比较多的管理后台导出excel 表格这个需求就非常的常见了
所以？
vue 怎么到处excel表格的？
有两种办法
1：请求接口后台直接给你的是excel文件，你需要做的就是怎么接收excel 表格，
2：就是请求后台接口给你返回的json数据，你需要生成excel表格，然后导出来，
在这里我讲一下第二种办法
废话不说直接教程：
一：需要安装依赖：
npm install -S file-saver xlsx
npm install -D script-loader
二：引入两个js
Blob.js和 Export2Excel.js。
可以新建一个文件夹，放进去
Blob.js和 Export2Excel.js文件：链接: http://pan.baidu.com/s/1nvSdw85 密码: 5qhi
三：需要两个方法
export2Excel() {
require.ensure([], () => {
const { export_json_to_excel } = require('../../vendor/Export2Excel'); ---require 括号里面是相对路径其实是引用 Export2Excel.js
const tHeader = ['序号', 'IMSI', 'MSISDN', '证件号码', '姓名']; ----tHeader 数组里面放的是字段的对应名
const filterVal = ['ID', 'imsi', 'msisdn', 'address', 'name']; -----filterVal 字段对应的值
const list = this.tableData; ----对应的json数组
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方法
注：如果webpack报解析错误：
在build----webpack.base.conf.js中resolve的alias加入 'vendor': path.resolve(__dirname, '../src/vendor'),
即可解决
alias是配置别名
还有一个问题：就是
上述有个Export2Excel.js它引用了 Blob.js 所以你要把那个 require( )的路径改成相对路径；完了再调用方法就可以了如下图：
注意：不要忘记引用这两个js，因为你要用人家的控件就要先引入才能用哦！！在入口文件main.js或者在组件里面单独引用都可以，我是直接在main.js引用的；
参考文献：http://www.cnblogs.com/Mrfan217/p/6944238.html