vue中將el-table導(dǎo)出為.xlsx的excel表格

1.引入2個(gè)必要的包

npm i xlsx file-saver -S

2.在需要導(dǎo)出表格的位置,引入這2個(gè)包

import FileSaver from "file-saver"
import XLSX from "xlsx"

3.對(duì)el-table加上id屬性,注:作者試了ref,不能用

<el-table
     id="mytable"
     :data="userData"
     border>

4.設(shè)置導(dǎo)出的事件行為

 <el-button @click="output" >導(dǎo)出</el-button>

5.寫output方法,直接復(fù)制就行了

output(){
        var wb = XLSX.utils.table_to_book(document.querySelector("#mytable"));//mytable為表格的id名
        /* 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" }),
            "sheet1.xlsx"http://導(dǎo)出的表名
          );
        } catch (e) {
          if (typeof console !== "undefined") console.log(e, wbout);
        }
        return wbout;
      }
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

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

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