vue中导出excel

1、安装依赖包
npm install js-xlsx file-saver -S
npm install script-loader -S -D //它帮我们挂载了，不需要引入到main.js里面
2、一般都是在项目src中创建一个文件夹vendor
把Blob.js和 Export2Excel.js这两个文件夹放到新建的文件夹内
可在网盘中提取
提取码：gu38

  data() {
    return {
      tableData: [],//存放的table数据
      list: null,
      filename: '',
      autoWidth: true,
      bookType: 'xlsx'
    }
  },
 //exportExcel点击导出的按钮方法
 exportExcel(){
        import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['平台代付订单号', '商户代付订单号', ' 户名', '卡号','开户行','银行账户类型','代付商户编号','代付金额','交易状态','创建时间']//excel表头
        const filterVal = ['orderno', 'torderno', 'accountname', 'cardno','openbank','cardaccounttype','acqmerchantno','amount','status','createtime']//table里对应的某个值
        const list = this.tableData     //要导出的数据
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: this.filename,
          autoWidth: this.autoWidth,
          bookType: this.bookType
        })
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    },

参数

//根据状态值来显示
<template scope="scope">
    {{ scope.row.orderStatus ? '已发布' : '未发布' }}
</template>

<el-table-column label="订单状态" width="">
        <template scope="scope">
            <a href="javascript:;">{{scope.row.orderStatus===0?'已完成订单':'未完成订单'}}</a>
        </template>
</el-table-column>

本篇文章是由于项目需要，参考https://panjiachen.github.io/vue-element-admin-site/feature/component/excel.html#excel-export
如果大家有任何疑问请给我留言，小编会及时回复大家的。