Vue+element ui table 導出到excel

需求：

　　Vue+element UI table下的根據搜索條件導出當前全部數據

參考：

　　https://blog.csdn.net/u010427666/article/details/79208145（vue2.0 + element UI 中 el-table 數據導出Excel）

準備工做：

　　一、安裝依賴：npm install --save xlsx file-saver

　　二、在放置須要導出功能的組件中引入

　　　　import FileSaver from 'file-saver'

　　　　 import XLSX from 'xlsx'

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

　　四、在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()方法中的前面第二和第三行，已經作了說明

 

以上是我在項目中作table導出需求的一個過程，給本身留個筆記。