vue 导出表格

一、需要安装依赖：

         cnpm install -S file-saver xlsx

         cnpm install -D script-loader

二、项目中新建一个文件夹：（vendor---名字任取）

　　　　里面放置两个文件Blob.js 和 Export2Excel.js。

组件methods里写一个方法

export2Excel() {

　　　　　　require.ensure([], () => {

　　　　　　　 　const { export_json_to_excel } = require('../../vendor/Export2Excel');

　　　　　　　　const tHeader = ['序号', 'IMSI', 'MSISDN', '证件号码', '姓名']; //对应表格输出的title

　　　　　　　　const filterVal = ['ID', 'imsi', 'msisdn', 'address', 'name']; // 对应表格输出的数据

　　　　　　　　const list = this.tableData;

　　　　　　　　const data = this.formatJson(filterVal, list);

　　　　　　　　export_json_to_excel(

                   {
                    header: tHeader,
                    data: data,
                    filename: 列表excel,
                    sheetName: 列表excel
                } ); //对应下载文件的名字

　　　　　　})

　　　　},

　　　　formatJson(filterVal, jsonData) {

　　　　　　return jsonData.map(v => filterVal.map(j => v[j]))

　　　　}

　四、按钮导出调用export2Excel方法

　

　　　　　注：如果webpack报解析错误：

　　　　　　在build----webpack.base.conf.js中resolve的alias加入 'vendor': path.resolve(__dirname, '../src/vendor'),

　　　　　　即可解决

导出 table（两个sheet） 表格

安装相关依赖

主要是两个依赖:(xlsx 和 file-saver)

npm install --save xlsx file-saver

引用

import FileSaver from 'file-saver' import XLSX from 'xlsx'

### 实现： （out-table1 为 table 的 id 可改 wb1 ，wb2 为 table 中数据 fileName 表格名字 SheetNames设置sheet 名字 Sheets 设置数据 ）

exportExcel() {

  var fix = document.querySelectorAll('.el-table__fixed')

  var wb1, wb2

  var device

  if (this.machineNo[2] !== null && this.machineNo[2] !== '' && this.machineNo[2] !== undefined) {

    device = this.machineNoMap[0].label + '-' + this.machineNoMap[0].children[0].label + '-' + this.machineNo[2]

  } else {

    device = this.$t('productionReport.count')

  }
  const fileName = this.month + this.$t('public.month') + this.$t('route.checkProductionStat') + '(' + device + ').xlsx'

  if (fix[0]) {

    wb1 = XLSX.utils.table_to_book(document.querySelector('#out-table1').removeChild(fix[0]))

    document.querySelector('#out-table1').appendChild(fix[0])

  } else {

    wb1 = XLSX.utils.table_to_book(document.querySelector('#out-table1'))

  }

  if (fix[1]) {

    wb2 = XLSX.utils.table_to_book(document.querySelector('#out-table2').removeChild(fix[1]))

    document.querySelector('#out-table2').appendChild(fix[1])

  } else {

    wb2 = XLSX.utils.table_to_book(document.querySelector('#out-table2'))

  }
  for (var key in wb1.Sheets) {

    console.log(key)

    var list = {

      SheetNames: ['数据', '统计'],

      Sheets: {

        数据: wb1.Sheets[key],

        统计: wb2.Sheets[key]

      }

    }

  }

  var wbout = XLSX.write(list, {

    bookType: 'xlsx',

    bookSST: true,

    type: 'array'

  })

  try {

    FileSaver.saveAs(

      new Blob([wbout], {

        type: 'application/octet-stream'

      }),

      fileName

    )

  } catch (e) {

    if (typeof console !== 'undefined') console.log(e, wbout)

  }

  return wbout

},