Vue3+element實現(xiàn)表格數(shù)據(jù)導(dǎo)出

更新時間：2023年07月27日 10:30:50 作者：DCodes

這篇文章主要為大家學習介紹了Vue3如何利用element實現(xiàn)表格數(shù)據(jù)導(dǎo)出功能，文中的示例代碼講解詳細，感興趣的小伙伴快跟隨小編一起學習一下吧

實現(xiàn)效果

導(dǎo)出后的效果：

步驟

第一步：安裝依賴

npm install --save xlsx file-saver

第二步：給表格添加id，導(dǎo)出的時候需要用到

  <!-- 導(dǎo)出按鈕 -->
 <el-button type="primary" @click="exportExcel">導(dǎo)出</el-button>
 <!-- 表格 -->
     <el-table 
     id="out-table"      // 添加id 這一步很重要
     :data="PowerList" border  
     style="width: 100%" 
     class="tableBox">
      </el-table>
      <!-- 表格end -->

第三步：引入依賴

// 引入導(dǎo)出Excel表格依賴
import * as FileSaver from "file-saver";
import * as XLSX from "xlsx";

第四步：導(dǎo)出

// 導(dǎo)出表格  按鈕點擊后觸發(fā)事件
const exportExcel = () => {
        /* 從表生成工作簿對象 */
        var 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 對象表示一個不可變、原始數(shù)據(jù)的類文件對象。
            //Blob 表示的不一定是JavaScript原生格式的數(shù)據(jù)。
            //File 接口基于Blob，繼承了 blob 的功能并將其擴展使其支持用戶系統(tǒng)上的文件。
            //返回一個新創(chuàng)建的 Blob 對象，其內(nèi)容由參數(shù)中給定的數(shù)組串聯(lián)組成。
            new Blob([wbout], { type: "application/octet-stream" }),
            //設(shè)置導(dǎo)出文件名稱
            "idea.xlsx"
            );
        } catch (e) {
            if (typeof console !== "undefined") console.log(e, wbout);
        }
        return wbout;
      }

這種導(dǎo)出方式跟渲染的表格數(shù)據(jù)是關(guān)聯(lián) ，如果想要全部導(dǎo)出，可以查詢所有再導(dǎo)出。有些情況下，表格數(shù)據(jù)是后臺接口返回的，這個時候需要調(diào)用接口來導(dǎo)出表格，關(guān)于調(diào)用后臺接口實現(xiàn)Excel導(dǎo)出功能請看另一篇：調(diào)用后臺接口實現(xiàn)Excel導(dǎo)出功能以及導(dǎo)出亂碼問題解決

到此這篇關(guān)于Vue3+element實現(xiàn)表格數(shù)據(jù)導(dǎo)出的文章就介紹到這了,更多相關(guān)Vue3 element表格數(shù)據(jù)導(dǎo)出內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: