VueCli4.0项目中将Elment UI表格内的数据导出为Excel文件

第一步、

首先安装三个依赖

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

或者：

yarn add file-saver
yarn add xlsx
yarn add script-loader --dev

第二步、

引入两个js文件

在src目录下新建excel文件夹，里面放入Blob.js和Export2Excel.js两个JS文件

链接1: https://pan.baidu.com/s/1iqyQAwYZqxxFtLIeOnzAag 提取码: upxq 
链接2: https://pan.baidu.com/s/1IHOgPrKC_NIKaBvLngwvMw 提取码: 76yv

下载后放到src下面的文件夹下：

第三步、

在main.js引入这两个文件(路径取决你们的路径)

第四步、

正确设置路径

打开Export2Excel.js文件，设置里面的路径，正确引入Blob.js

 现在回到你要用导出功能的组件里，在data里放入tableData变量，这个是存放你表格里的数据，类型为数组，里面存放对象，表格的每一行为一个对象，存入tableData。

举个列子:

如果你的每一行是这样子

那么data里的tableData就是这样子(切记，你的表格有多少行内容，tableData里就存多少个对象,对象属性不用变，改变值即可)

 

 第五步、

接下来在methods里写入两个方法，如下:
哪个按钮是导出功能，就调用export2Excel()方法：

export2Excel() {
　require.ensure([], () => {
　　　const { export_json_to_excel } = require('../../vendor/Export2Excel');
　　　const tHeader = ['序号', '帐号', '院校'];
　　　// 上面设置Excel的表格第一行的标题
　　　const filterVal = ['index', 'phone_Num', 'school_Name'];
　　　// 上面的index、phone_Num、school_Name是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]))
   }

 注意上面的方法也有个路径问题，要自己修改：

第六步、完整代码如下：

第七步、导出的结果如下： 

 

 

 第八步、注意事项：

报错提示如下：

查了很多资料最后终于找到了：

因为 Export2Excel.js 里面 Blob.js的路径引入的不正确；请看下图：

正确的路径如下：

 

 没有报错了；

最后为了方便大家的沟通与交流请加QQ群： 625787746

请进QQ群交流：【IT博客技术分享群①】：https://jq.qq.com/?_wv=1027&k=DceI0140