vue+elementUI前端表格excel文件下載

1.安裝依賴

npm install --save xlsx file-saver

2.引入

import FileSaver from 'file-saver'

import XLSX from 'xlsx'

3、HTML中的設置，簡單來說就是給需要導出的table標簽el-table上加一個id：如exportTab，對應下面的exportExcel方法中的 document.querySelector('#exportTab') 

4、在methods中設置真正實現導出轉換excel表格的方法，如下

exportExcel () {
      /* generate workbook object from table */
      var xlsxParam = { raw: true } // 導出的內容只做解析，不進行格式轉換
      var wb = XLSX.utils.table_to_book(document.querySelector('#exportTab'), xlsxParam)

      /* get binary string as output */
      var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
      try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '審核情況表.xlsx')
      } catch (e) {
        if (typeof console !== 'undefined') {
          console.log(e, wbout)
        }
      }
      return wbout
}

可能還會遇到以下問題

（一）如果存在分頁，導出時卻只導出當前table綁定的數據，假如我們設置的table每頁只有10條數據，導出時只導出了10條，並非所有符合條件的數據

　　原因：此插件只導出當前table中所有的數據

　　解決辦法：在HTML代碼中再加一個el-table標簽，這個table專門用來導出數據，且此table一直隱藏着，當查詢條件發生變化時，根據后台返回的所有符合條件的數據總量total值，然后重新設置獲取后台數據方法的參數，拉取到所有符合條件的數據綁定進來，這樣導出的就是想要的數據了。

 

（二）第一次導出時，導出的excel表格只有表頭，沒有數據內容

　　解決方法：給導出到excel表格的函數exportExcel()設置一個延時執行即可，因為剛開始我沒有設置延時執行，拉取到數據后直接賦值給了綁定到table上的exportData上，然后就立即調用exportExcel()導致，我猜測exportData渲染到table是需要一定時間的，這段時間內我們立即調用exportExcel()時，數據還沒被渲染進去，此時exportExcel()拿不到數據，故此第一次導出的表格中沒有數據

 

（三）導出的數據出現兩份的情況

　　原因：因為element ui下的el-table被渲染出來后有兩個table標簽，目的是方便進行數據交互使用，所以如果el-column存在fixed屬性時，導出時會出現兩份數據的情況

　　解決方法：我是參照上面大佬的文章，直接將隱藏table中的el-table-column上的fixed屬性去掉，畢竟這個table是隱藏起來的，直接去掉el-table-column上的fixed屬性最便捷

 

（四）導出的excel表格，如果出現數字字符比較長的，在導出表格中會變成科學計數那樣的情況

　　解決方法：即上面exportExcel()方法中的前面第二和第三行，已經做了說明

var xlsxParam = { raw: true }； // 導出的內容只做解析，不進行格式轉換
var wb = XLSX.utils.table_to_book(document.querySelector('#exportTab'), xlsxParam)；