Vue实现导出Excel表格

一、 安装三个依赖项

$ cnpm install -S file-saver
$ cnpm install -S xlsx
$ cnpm install -D script-loader

二、在项目中新建一个文件夹（一般在src下新建，文件名自取，在这里命名为excel），在文件夹中放入Blob.js 和 export2Excel.js （这两个文件可在gitup上进行下载）

Blob.js ，export2Excel.js下载地址：https://pan.baidu.com/s/1bzLCiRFvPy2S1FAnNzJsBA 密码：kqfq

三、在build文件夹下找到webpack.base.conf.js做如下修改

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'scss_vars': '@/styles/vars.scss',
      'excel': path.resolve(__dirname, '../src/excel'),//新增一行
    }
  },

四、在vue文件中添加下载功能（其中downloadExcel为下载事件，及按钮触发下载事件）

       //列表下载
        downloadExcel() {
          this.$confirm('确定下载列表文件?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.excelData = this.selectData //你要导出的数据list。
            this.export2Excel()
          }).catch(() => {
 
          });
        },
     //数据写入excel
        export2Excel() {
          var that = this;
          require.ensure([], () => {
            const { export_json_to_excel } = require('@/excel/export2Excel'); //这里必须使用绝对路径，使用@/+存放export2Excel的路径
            const tHeader = ['统一编号','海关编号','境内收发货人','提运单号']; // 导出的表头名信息
            const filterVal = ['unifiedNo','customsNo', 'teRsComanyName', 'deliveryNo']; // 导出的表头字段名，需要导出表格字段名
            const list = that.excelData;
            const data = that.formatJson(filterVal, list);
 
            export_json_to_excel(tHeader, data, '下载数据excel');// 导出的表格名称，根据需要自己命名
          })
        },
      //格式转换，直接复制即可
        formatJson(filterVal, jsonData) {
          return jsonData.map(v => filterVal.map(j => v[j]))
        },

完成以上步骤则可成功实现js导出excel表格。