vue中通过Export2Excel导成excel详细步骤

在vue项目中有导出Excel表格的需求，并且需要自适应宽度
在前端项目中导出Excel表格，Vue.js确实可以实现，亲测具体实现步骤为:

1. 安装依赖包

npm  install  --save file-saver
npm  install  --save  xlsx
npm  install  --save script-loader

2.导入两个js

下载资源Blob.js和Export2Excel.js
在src下，创建一个文件夹 vendor，放Blob.js和Export2Excel.js两个文件

3.在组件中调用

<el-button @click="downMode(scope.row)" type="text">下载</el-button>
download() {
  if(this.tableData.length<1) return this.$info('请先查询您要下载的列表');
  this.getListData(true,(dataList)=>{
    if(dataList.length<1) return;
    import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['交易日期', '交易时间', '对方账号',
        "对方户名","交易类型","收支类型","交易金额","币种"]
        const filterVal = ['TranDt1F', "TranTm1F", "TrgtAcctNo",
        "TrgtAcctNm","TranTypeF","IcgAndOtgTpF","TranAmtF","TrgtCrcyF"]
        const data = this.formatJson(filterVal, dataList)
        excel.export_json_to_excel(tHeader,data,"归集明细")
    })
  })
},
formatJson(filterVal, jsonData) {
  return jsonData.map(v => filterVal.map(j => {
    if (j === 'timestamp') {
      return parseTime(v[j])
    } else {
      return v[j]
    }
  }))
},
getListData(paging,fn) {
 if(!paging) this.dataListLoading = true;
  this.$post("CollectAccDetailQry", { }).then(res => {
    this.dataListLoading = false;
    if (!res.data.jsonError) {
      let dataList = res.data.list
      if(fn) return fn(dataList);
      this.tableData = dataList || [];
    } 
  });
}