vue中導(dǎo)出表格數(shù)據(jù)

項目中使用了 element-UI ,需要導(dǎo)出表格中的數(shù)據(jù),主要用到了兩個依賴:xlsx ,file-saver 。
相關(guān)git : https://github.com/SheetJS/js-xlsx,https://github.com/eligrey/FileSaver.js

  1. 安裝依賴
npm install --save xlsx file-saver
  1. 組件中引入
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
  1. 添加一個方法
exportExcel () {
      //在導(dǎo)出的過程中發(fā)現(xiàn)數(shù)字的格式發(fā)生了變化,可以通過添加參數(shù)解決 
      var xlsxParam = { raw: true };//轉(zhuǎn)換成excel時,使用原始的格式
     // 需要導(dǎo)出的table的DOM節(jié)點 
     var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'), xlsxParam)
     var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
     try {
    // sheetjs 導(dǎo)出的文件名,可以根據(jù)需要修改
    FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheetjs.xlsx')
  } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
         return wbout
     },
  1. 執(zhí)行方法就可以得到表格對應(yīng)的數(shù)據(jù)。
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容