Vue項(xiàng)目中el-table導(dǎo)出Excel過程
更新時(shí)間：2026年04月14日 09:20:19 作者：Sunshine_Jian
文章介紹了Vue項(xiàng)目中使用xlsx和file-saver庫導(dǎo)出表格數(shù)據(jù)為Excel文件的步驟,包括安裝依賴、引入庫、設(shè)置表格ID、添加導(dǎo)出按鈕以及處理下載等
1、安裝相關(guān)的依賴（xlsx，file-saver）
npm install --save xlsx file-saver
2、在main.js里引入
import FileSaver from 'file-saver' import XLSX from 'xlsx' Vue.prototype.$FileSaver = FileSaver; //設(shè)置全局 Vue.prototype.$XLSX = XLSX; //設(shè)置全局
3、設(shè)置表格的id
<el-table
id="out-table"
:header-cell-style="{
background: 'rgba(245,248,253,1)',
color: '#554'
}"
:row-style="{ height: '30px' }"
:cell-style="{ padding: '0px'}"
border
:data="tableData"
v-loading="loading"
stripe
>
<el-table>4、導(dǎo)出按鈕（觸發(fā)）
<el-button
size="small"
type="primary"
icon="el-icon-download"
@click="exportData"
>導(dǎo)出</el-button>5、下載處理
methods: {
//導(dǎo)出功能
exportData(){
let excelName = '導(dǎo)出表格名稱.xlsx';
var xlsxParam = { raw: true };//轉(zhuǎn)換成excel時(shí)，使用原始的格式
// 克隆節(jié)點(diǎn)
let tables = document.getElementById("out-table").cloneNode(true);
// 判斷是否為固定列，解決（為固定列時(shí)，會重復(fù)生成表格）
if (tables.querySelector('.el-table__fixed') !== null) {
tables.removeChild(tables.querySelector('.el-table__fixed'))
}
let table_book = this.$XLSX.utils.table_to_book(tables,xlsxParam);
var table_write = this.$XLSX.write(table_book, {
bookType: "xlsx",
bookSST: true,
type: "array"
});
try {
this.$FileSaver.saveAs(
new Blob([table_write], { type: "application/octet-stream" }),
excelName
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, table_write);
}
return table_write;
}
}總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了vue中添加mp3音頻文件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
vue.config.js?是一個可選的配置文件，如果項(xiàng)目的?(和?package.json?同級的)?根目錄中存在這個文件，那么它會被?@vue/cli-service?自動加載，本文重點(diǎn)介紹VUE前端vue.config.js簡介，感興趣的朋友跟隨小編一起看看吧2023-01-01
利用Vue.js實(shí)現(xiàn)checkbox的全選反選效果
最近用vue做了兩個項(xiàng)目，都需要實(shí)現(xiàn)全選反選的功能，所以想著記錄下分享給大家，方便自己或者有需要的朋友們參考講學(xué)習(xí)，所以下面這篇文章主要介紹了利用Vue.js實(shí)現(xiàn)checkbox的全選反選效果,需要的朋友可以一起來學(xué)習(xí)學(xué)習(xí)。2017-01-01
使用VUE+iView+.Net Core上傳圖片的方法示例
這篇文章主要介紹了使用VUE+iView+.Net Core上傳圖片的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
詳解vue中父子組件傳遞參數(shù)props的實(shí)現(xiàn)方式
這篇文章主要給大家介紹了在vue中，父子組件傳遞參數(shù)?props?實(shí)現(xiàn)方式，文章通過代碼示例介紹的非常詳細(xì)，對我們的學(xué)習(xí)或工作有一定的參考價(jià)值,需要的朋友可以參考下2023-07-07
插槽就是子組件中的提供給父組件使用的一個占位符，用<slot></slot> 表示，父組件可以在這個占位符中填充任何模板代碼，如 HTML、組件等，填充的內(nèi)容會替換子組件的<slot></slot>標(biāo)簽，這篇文章主要介紹了Vue插槽的理解和使用,需要的朋友可以參考下2023-03-03
vue項(xiàng)目中圖片選擇路徑位置static或assets的區(qū)別及說明
這篇文章主要介紹了vue項(xiàng)目中圖片選擇路徑位置static或assets的區(qū)別及說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue?cli3?項(xiàng)目中如何使用axios發(fā)送post請求
這篇文章主要介紹了vue?cli3?項(xiàng)目中如何使用axios發(fā)送post請求，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
當(dāng)啟動vue項(xiàng)目安裝依賴時(shí)報(bào)錯的解決方案
這篇文章主要介紹了當(dāng)啟動vue項(xiàng)目安裝依賴時(shí)報(bào)錯的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue2.0數(shù)據(jù)雙向綁定與表單bootstrap+vue組件
這篇文章主要介紹了vue2.0數(shù)據(jù)雙向綁定與表單bootstrap+vue組件,非常不錯，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02