第一步:安装三个依赖包

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

 

Logo

前往低代码交流专区

更多推荐