Vue+element ui table 匯出到excel

weixin_34085658發表於2019-01-18
VueUIExcel

需求：

　　Vue+element UI table下的根據搜尋條件匯出當前所有資料

參考：

　　https://blog.csdn.net/u010427666/article/details/79208145（vue2.0 + element UI 中 el-table 資料匯出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()方法中的前面第二和第三行，已經做了說明

 

以上是我在專案中做table匯出需求的一個過程，給自己留個筆記。

 

轉載於:https://www.cnblogs.com/secretAngel/p/10277077.html

相關文章