Vue项目中将表格内的数据导出为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文件
链接: https://pan.baidu.com/s/1b7b23xX-XWQmvYUIhPFouA 密码: vxdi

在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]))
   }

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

导出效果如下