首先安装三个依赖
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]))
   }
注意上面的方法也有个路径问题,要自己修改

这里写图片描述

导出效果如下

这里写图片描述

Logo

前往低代码交流专区

更多推荐