将页面中表格数据导出excel格式的文件（vue）

　　近期由于项目需要，需要将页面中的表格数据导出excel格式的文件，折腾了许久，在网上各种百度，虽然资料不少，但是大都不全，踩了许多坑，总算是皇天不负有心人，最后圆满解决了。

　　1、安装相关依赖(npm安装可能会出现某些错误，可以使用cnpm)：

?

1 2 3

npm install file-saver --save   // 保存文件用 npm install xlsx --save    // 转二进制用 npm install script-loader --save-dev    // xlsx核心文件

　　

　　2、下载两个核心js文件，Blob.js和 Export2Excel.js  下载地址：Blob.js和 Export2Excel.js文件

　　

　　3、在src目录下新建vendor文件夹，将Blob.js和 Export2Excel.js放进去。

　　4、更改webpack.base.conf.js配置。

　　在resolve的alias里添加如下代码：

?

1	'vendor': path.resolve(__dirname, '../src/vendor')

　　5、在需要导出excel格式文件的页面中写入以下两个方法，如：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

methods: {     formatJson(filterVal, jsonData) { 　　　　return jsonData.map(v => filterVal.map(j => v[j])) 　　},     export2Excel() {       const _this = this 　　　require.ensure([], () => {   　　　const { export_json_to_excel } = require('../vendor/Export2Excel');   　　　const tHeader = ['ID', '封面', '小说名','二级分类','作者','进度','更新时间', '状态'];   　　　const filterVal = ['novelId', 'imageUrl', 'title', 'categoryName', 'author', 'completeStatus', 'updateTime', 'status'];   　　　const list = _this.dataList;   　　　const data = _this.formatJson(filterVal, list);   　　　export_json_to_excel(tHeader, data, '小说列表'); 　　　})     }   }

　　注意：tHeader表示表头的标题，filterVal表示表头的字段名，可通过点击事件调用导出方法。

?

1	<button type="primary" @click="export2Excel">导出</button>