Vue3+element實(shí)現(xiàn)表格數(shù)據(jù)導(dǎo)出
更新時(shí)間：2023年07月27日 10:30:50 作者：DCodes
這篇文章主要為大家學(xué)習(xí)介紹了Vue3如何利用element實(shí)現(xiàn)表格數(shù)據(jù)導(dǎo)出功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴快跟隨小編一起學(xué)習(xí)一下吧
實(shí)現(xiàn)效果
導(dǎo)出后的效果：
步驟
第一步：安裝依賴
npm install --save xlsx file-saver
第二步：給表格添加id，導(dǎo)出的時(shí)候需要用到
<!-- 導(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)出表格 按鈕點(diǎn)擊后觸發(fā)事件
const exportExcel = () => {
/* 從表生成工作簿對(duì)象 */
var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
/* 獲取二進(jìn)制字符串作為輸出 */
var wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array"
});
try {
FileSaver.saveAs(
//Blob 對(duì)象表示一個(gè)不可變、原始數(shù)據(jù)的類文件對(duì)象。
//Blob 表示的不一定是JavaScript原生格式的數(shù)據(jù)。
//File 接口基于Blob，繼承了 blob 的功能并將其擴(kuò)展使其支持用戶系統(tǒng)上的文件。
//返回一個(gè)新創(chuàng)建的 Blob 對(duì)象，其內(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ù)是后臺(tái)接口返回的，這個(gè)時(shí)候需要調(diào)用接口來導(dǎo)出表格，關(guān)于調(diào)用后臺(tái)接口實(shí)現(xiàn)Excel導(dǎo)出功能請(qǐng)看另一篇：調(diào)用后臺(tái)接口實(shí)現(xiàn)Excel導(dǎo)出功能以及導(dǎo)出亂碼問題解決
到此這篇關(guān)于Vue3+element實(shí)現(xiàn)表格數(shù)據(jù)導(dǎo)出的文章就介紹到這了,更多相關(guān)Vue3 element表格數(shù)據(jù)導(dǎo)出內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于VUE配置history路由模式配置的相關(guān)資料,History模式是Vue路由的另一種模式,在History模式下URL中的路徑不再使用#符號(hào),而是直接使用正常的路徑形式,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了Vue項(xiàng)目中封裝axios的方法,axios 是一個(gè)輕量的 HTTP客戶端，基于 XMLHttpRequest 服務(wù)來執(zhí)行 HTTP 請(qǐng)求，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-05-05
vue實(shí)現(xiàn)動(dòng)態(tài)添加數(shù)據(jù)滾動(dòng)條自動(dòng)滾動(dòng)到底部的示例代碼
本篇文章主要介紹了vue實(shí)現(xiàn)動(dòng)態(tài)添加數(shù)據(jù)滾動(dòng)條自動(dòng)滾動(dòng)到底部的示例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
利用v-viewer圖片預(yù)覽插件放大需要預(yù)覽的圖片
本文介紹了v-viewer插件的安裝和使用步驟,包括npm安裝、在main.js文件中全局引入,以及常用的三種使用方式,文章提供了簡單的布局頁面效果,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-10-10
本文作者分享了使用Vue進(jìn)行代理配置的個(gè)人經(jīng)驗(yàn),介紹了如何使用proxyTable進(jìn)行跨域請(qǐng)求配置,并提供了具體的配置文件和使用方法,便于同行參考和學(xué)習(xí)2024-10-10
vue前端框架—Mint UI詳解（更適用于移動(dòng)端）
這篇文章主要介紹了vue前端框架—Mint UI的詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue-openlayers實(shí)現(xiàn)地圖坐標(biāo)彈框效果
這篇文章主要為大家詳細(xì)介紹了vue-openlayers實(shí)現(xiàn)地圖坐標(biāo)彈框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要為大家詳細(xì)介紹了Vue自定義可以選擇日期區(qū)間段的日歷插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
在 Vue 中,插槽（Slot）是一種非常強(qiáng)大且靈活的機(jī)制,用于在組件中插入內(nèi)容,默認(rèn)插槽是在父組件中傳遞內(nèi)容給子組件時(shí)使用的一種方式,這篇文章主要介紹了Vue中的默認(rèn)插槽詳解,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了vue組件props傳值,對(duì)象獲取不到的問題,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-06-06