1.創(chuàng)建excel.js文件，代碼如下
//引入依賴
import FileSaver from ‘file-saver’
import * as XLSX from ‘xlsx’;

// id綁定的id，title表格名稱
export const excel = (id, title) => {
console.log(“我執(zhí)行了”)
/* generate workbook object from table */
// 判斷要導出的節(jié)點中是否有fixed的表格，如果有，轉換excel時先將該dom移除，然后append回去，
let fix = document.querySelector(‘.el-table__fixed’);
let wb;
if (fix) {
wb = XLSX.utils.table_to_book(document.querySelector(‘#’+id).removeChild(fix));
document.querySelector(‘#’+id).appendChild(fix);
} else {
wb = XLSX.utils.table_to_book(document.querySelector(‘#’+id));
}

//網(wǎng)上wb = XLSX.utils.table_to_book(document.querySelector(‘#’+id));直接這樣寫，如果存在固定列，導出的excel表格會重復兩遍

/* get binary string as output */
let wbout = XLSX.write(wb, { bookType: ‘xlsx’, bookSST: true, type: ‘a(chǎn)rray’ });
try {
FileSaver.saveAs(new Blob([wbout], { type: ‘a(chǎn)pplication/octet-stream’ }), title+‘.xlsx’)
} catch (e) { if (typeof console !== ‘undefined’) console.log(e, wbout) }
return wbout
};

2.vue頁面編寫，table中的id需要編寫
<el-button type=“success” size=“mini” @click=“downloadExcel”>導出數(shù)據(jù)
<el-table
v-loading=“l(fā)istLoading”
id=“out-table”
:data=“fileList”
element-loading-text=“Loading”
fit

show-summaryhighlight-current-row>

3.在vue頁面引入excel.js文件
import { excel } from “…/…/utils/excel.js”;

4.實現(xiàn)導出的方法
downloadExcel() {
this.$confirm(“確定導出列表文件?”, “提示”, {
confirmButtonText: “確定”,
cancelButtonText: “取消”,
type: “warning”,
})
.then(() => {
excel(“out-table”, new Date().toLocaleString() + “_保函日報表.xlsx”);
})
.catch(() => {});
},

總結

以上是生活随笔為你收集整理的vue导出excel表格的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。