vue---EleElement UI 表格導出功能

步驟一：安裝依賴

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

 

步驟二：在放置需要導出功能的組件中引入相關組件

import FileSaver from 'file-saver'

import XLSX from 'xlsx'

步驟三：給table設置一個id

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

步驟四：寫method

在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' }), 'fileName.xlsx')
      } catch (e) {
        if (typeof console !== 'undefined') {
          console.log(e, wbout)
        }
      }
      return wbout
}

注意：

• 在表格中的數字為百分比或者是其他的，在到處的時候會進行處理變成小數，或者科學計數法，這個就需要集啊讓xlsxParam這個字段，讓導出不做格式轉換，這樣就能夠你的table中是什么，導出就是什么
• 可以導出表格的，但有個問題是導出的數據是重復的，這個是因為你的表格有列使用了fixed屬性，element-ui的table使用了fixed屬性固定列，導出表格時會出現導出兩次的問題，是因為在table中有兩個table標簽，我們可以通過代碼解決這個問題，注意代碼中拷貝了一個table元素，否則直接刪除會刪除頁面中的表格

這個時候我們可以改良一下我們的代碼： 

exportExcel () {
      /* generate workbook object from table */
      var xlsxParam = { raw: true } // 導出的內容只做解析，不進行格式轉換
      var table = document.querySelector('#exportTab').cloneNode(true)
      table.removeChild(table.querySelector('.el-table__fixed')) //這里是雙下划線
      var wb = XLSX.utils.table_to_book(table, 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' }), 'fileName.xlsx')
      } catch (e) {
        if (typeof console !== 'undefined') {
          console.log(e, wbout)
        }
      }
      return wbout
}

 

 這個時候我們在點擊下載，就能夠正常實現功能了

 

 

抓緊試一下吧~~~~~