Vue3+element實現(xiàn)表格數據導出
更新時間：2023年07月27日 10:30:50 作者：DCodes
這篇文章主要為大家學習介紹了Vue3如何利用element實現(xiàn)表格數據導出功能，文中的示例代碼講解詳細，感興趣的小伙伴快跟隨小編一起學習一下吧
實現(xiàn)效果
導出后的效果：
步驟
第一步：安裝依賴
npm install --save xlsx file-saver
第二步：給表格添加id，導出的時候需要用到
<!-- 導出按鈕 -->
<el-button type="primary" @click="exportExcel">導出</el-button>
<!-- 表格 -->
<el-table
id="out-table" // 添加id 這一步很重要
:data="PowerList" border
style="width: 100%"
class="tableBox">
</el-table>
<!-- 表格end -->第三步：引入依賴
// 引入導出Excel表格依賴 import * as FileSaver from "file-saver"; import * as XLSX from "xlsx";
第四步：導出
// 導出表格 按鈕點擊后觸發(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 對象表示一個不可變、原始數據的類文件對象。
//Blob 表示的不一定是JavaScript原生格式的數據。
//File 接口基于Blob，繼承了 blob 的功能并將其擴展使其支持用戶系統(tǒng)上的文件。
//返回一個新創(chuàng)建的 Blob 對象，其內容由參數中給定的數組串聯(lián)組成。
new Blob([wbout], { type: "application/octet-stream" }),
//設置導出文件名稱
"idea.xlsx"
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;
}這種導出方式跟渲染的表格數據是關聯(lián) ，如果想要全部導出，可以查詢所有再導出。有些情況下，表格數據是后臺接口返回的，這個時候需要調用接口來導出表格，關于調用后臺接口實現(xiàn)Excel導出功能請看另一篇：調用后臺接口實現(xiàn)Excel導出功能以及導出亂碼問題解決
到此這篇關于Vue3+element實現(xiàn)表格數據導出的文章就介紹到這了,更多相關Vue3 element表格數據導出內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要給大家介紹了關于VUE配置history路由模式配置的相關資料,History模式是Vue路由的另一種模式,在History模式下URL中的路徑不再使用#符號,而是直接使用正常的路徑形式,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了Vue項目中封裝axios的方法,axios 是一個輕量的 HTTP客戶端，基于 XMLHttpRequest 服務來執(zhí)行 HTTP 請求，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-05-05
vue實現(xiàn)動態(tài)添加數據滾動條自動滾動到底部的示例代碼
本篇文章主要介紹了vue實現(xiàn)動態(tài)添加數據滾動條自動滾動到底部的示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
本文介紹了v-viewer插件的安裝和使用步驟,包括npm安裝、在main.js文件中全局引入,以及常用的三種使用方式,文章提供了簡單的布局頁面效果,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-10-10
本文作者分享了使用Vue進行代理配置的個人經驗,介紹了如何使用proxyTable進行跨域請求配置,并提供了具體的配置文件和使用方法,便于同行參考和學習2024-10-10
這篇文章主要介紹了vue前端框架—Mint UI的詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
vue-openlayers實現(xiàn)地圖坐標彈框效果
這篇文章主要為大家詳細介紹了vue-openlayers實現(xiàn)地圖坐標彈框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要為大家詳細介紹了Vue自定義可以選擇日期區(qū)間段的日歷插件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
在 Vue 中,插槽（Slot）是一種非常強大且靈活的機制,用于在組件中插入內容,默認插槽是在父組件中傳遞內容給子組件時使用的一種方式,這篇文章主要介紹了Vue中的默認插槽詳解,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了vue組件props傳值,對象獲取不到的問題,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-06-06