Element-ui組件庫Table表格導出Excel文件

Element-ui組件庫Table表格導出Excel文件

1.npm導入包

npm install --save xlsx file-saver

2.給el-table標簽添加id

<el-table :data="tableData" border id="out-table" >

3.引用包

// 引入導出Excel表格依賴
    import FileSaver from "file-saver";
    import XLSX from "xlsx";

4.添加導出按鈕

<button @click="exportExcel">點擊導出</button>

5.導出方法

//定義導出Excel表格事件
exportExcel() {
        /* 從表生成工作簿對象 */
        let wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
        /* 獲取二進制字符串作為輸出 */
        var wbout = XLSX.write(wb, {
            bookType: 'xlsx',
            bookSST: true,
            type: 'array'
        })
        try {
            FileSaver.saveAs(
            //Blob 對象表示一個不可變、原始數據的類文件對象。
            //Blob 表示的不一定是JavaScript原生格式的數據。
            //File 接口基於Blob，繼承了 blob 的功能並將其擴展使其支持用戶系統上的文件。
            //返回一個新創建的 Blob 對象，其內容由參數中給定的數組串聯組成。
            new Blob([wbout], { type: 'application/octet-stream' }),
            //設置導出文件名稱
            'sheetjs.xlsx'
            )
        } catch (e) {
            if (typeof console !== 'undefined') console.log(e, wbout)
        }
        return wbout
        }

　　

 

參考資料：https://blog.csdn.net/gs981600308/article/details/88997292