vue-cli导出表格数据到Excel

以下为需要用到的插件库

npm install [email protected]     用来保存文件的
npm install --save-dev script-loader   由于由于这几个文件不支持import引入，所以我们需要`script-loader`来将他们挂载到全局环境下。
npm install xlsx   //就是上边提到的js-xlsx这个东东
npm install jszip  //导出为压缩文件////或者是将文件压缩

首先，先创建一个公共文件夹，里边存放封装的公共的导出的js,这里起名为vendor,里边放三个封装好的文件，分别为 blog.js \ Export2Excel.js \ Export2Zip.js
这三个文件下载链接：https://share.weiyun.com/5011fl4 密码：8d44kg
接下来就是在 vue 组件中使用了，在组件的 methods 中添加下载按钮执行的方法：

handleDownload() {
   this.downloadLoading = true
      // import('@/vendor/Export2Excel') 返回的是一个 Promise 对象
      import('@/vendor/Export2Excel').then(excel => { // excel
          // 将table表格对应的属性名转换成中文
          const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
          // table表格中对应的属性名
          const filterVal = ['time', 'title', 'type', 'importance', 'status']
          const data = this.formatJson(filterVal, this.list)
          excel.export_json_to_excel({
               header: tHeader,
               data,
               filename: 'table-list'
          })
         this.downloadLoading = false
     })
},
// 洗数据
// 因为导出为 excel 的数据，必须是二维数组，this.list的每一项都是对象，因此，每一项必须转成数组
formatJson(filterVal, jsonData) {
    return tableData.map(v => fields.map(j => v[j]));
    //return jsonData.map(v => filterVal.map(j => {
    //      if (j === 'time') {
    //           v[j] = '时间';
    //     } else {
    //          return v[j]
    //      }
    // }))
}

Export2Excel.js暴露了两个接口export_table_to_excel和export_json_to_excel,我们常用export_json_to_excel因为更加的可控一点
点击下载按钮的时候就可以进行下载了