vue 导出excel表格

对于涉及到数据比较多的管理后台导出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

　　　　　　

转载于:https://www.cnblogs.com/lijuntao/p/7517431.html