vue项目中列表数据导出为excel格式数据

第一步：安装三个依赖包

npm install -S file-saver（生产依赖，则为-s）

npm install -S xlsx

npm install -D script-loader （开发依赖，则为-d）

第二步：引入三个文件：

我们在src目录下新建一个文件夹，例如vendor，然后把：Blob.js和 Export2Excel.js两个文件（可以去网上找这两个文件）放在该文件夹下，在Export2Excel.js文件中我们引入

require('script-loader!file-saver'); // 保存文件

require('script-loader!@/vendor/Blob'); // 转二进制

由于这几个文件不支持import引入，所以我们需要`script-loader`来将他们挂载到全局环境下

import XLSX from 'xlsx' // xlsx核心

第三步：使用

我们在需要的地方（如按下导出的点击事件）书写如下代码

import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date'] // excel的表头标题
        const filterVal = ['id', 'name', 'name', 'age', 'addr'] // 需要导出对应自己列表中的每项数据 
        const list = this.listData // 整个列表的数据
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          autoWidth: this.autoWidth,
          filename: 'table-list' // 文件名称,若不写导出文件可能不识别
        })
    },
    formatJson(filterVal, jsonData) { // 在整个列表的数据中过滤导出自己需要的数据
      return jsonData.map(v => filterVal.map(j => {v[j]}))},