1. 程式人生 > >vue中匯出excel

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]
        }
      }))
    },

引數
在這裡插入圖片描述

本篇文章是由於專案需要,參考https://panjiachen.github.io/vue-element-admin-site/feature/component/excel.html#excel-export
如果大家有任何疑問請給我留言,小編會及時回覆大家的。