Vue3+element實(shí)現(xiàn)表格數(shù)據(jù)導(dǎo)出
實(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)用接口來(lái)導(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)出亂碼問(wèn)題解決
到此這篇關(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)文章
vue腳手架創(chuàng)建項(xiàng)目時(shí)報(bào)catch錯(cuò)誤及解決
這篇文章主要介紹了vue腳手架創(chuàng)建項(xiàng)目時(shí)報(bào)catch錯(cuò)誤及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue的事件響應(yīng)式進(jìn)度條組件實(shí)例詳解
這篇文章主要介紹了Vue的事件響應(yīng)式進(jìn)度條組件的實(shí)例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-02-02
vue+elementUI實(shí)現(xiàn)內(nèi)嵌table的方法示例
本文主要介紹了vue+elementUI實(shí)現(xiàn)內(nèi)嵌table的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
undefined是否會(huì)變?yōu)閚ull原理解析
這篇文章主要為大家介紹了undefined是否會(huì)變?yōu)閚ull原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
???????基于el-table和el-pagination實(shí)現(xiàn)數(shù)據(jù)的分頁(yè)效果
本文主要介紹了???????基于el-table和el-pagination實(shí)現(xiàn)數(shù)據(jù)的分頁(yè)效果，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
vsCode安裝配置創(chuàng)建Vue3項(xiàng)目全過(guò)程
本文介紹了如何在Windows系統(tǒng)上安裝和配置Vue.js開發(fā)環(huán)境,包括安裝VS Code、Node.js、Vue CLI以及創(chuàng)建和啟動(dòng)一個(gè)Vue項(xiàng)目2025-01-01
vue各種事件監(jiān)聽實(shí)例(小結(jié))
這篇文章主要介紹了vue各種事件監(jiān)聽實(shí)例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
vue-router鉤子函數(shù)實(shí)現(xiàn)路由守衛(wèi)
這篇文章主要介紹了vue-router鉤子函數(shù)實(shí)現(xiàn)路由守衛(wèi)，對(duì)vue感興趣的同學(xué)，可以參考下2021-04-04
利用vue3編寫一個(gè)有趣的牛馬時(shí)鐘并集成到小程序
這篇文章主要為大家詳細(xì)介紹了如何利用vue3編寫一個(gè)有趣的牛馬時(shí)鐘并集成到小程序,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下2025-07-07
詳解webpack打包vue項(xiàng)目之后生成的dist文件該怎么啟動(dòng)運(yùn)行
這篇文章主要介紹了詳解webpack打包vue項(xiàng)目之后生成的dist文件該怎么啟動(dòng)運(yùn)行,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09