vue element 導出 分頁數據的excel表格

1.安裝相關依賴

npm install --save xlsx file-saver

2.導入相關插件

　　在組建頭部導入相關插件

const FileSaver  = require("file-saver")
const XLSX   = require("xlsx")

3.調用相關的方法

var wb = XLSX.utils.table_to_book(document.querySelector("#tableBox"))
var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
try {
  FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheetjs.xlsx')
} catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }

4.分頁的數據導出

      // 執行下載
      async activeExportOut(){
        // this.ableExportOut = true //設置可以下載
        this.oldtableData = this.tableData //保存起就數據
        await this.setData()
        this.exportOut()
      }, 
      setData(){
        this.tableData = test //賦值新數據        
      },
      //下載表格
      exportOut(){
         var wb = XLSX.utils.table_to_book(document.querySelector("#tableBox"))
         var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
         try {
             FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheetjs.xlsx')
         } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }

        //  this.ableExportOut = false //設置不可下載
         this.tableData = this.oldtableData //回復原來說的數據
         return wbout
      }