1.引入2個(gè)必要的包
npm i xlsx file-saver -S
2.在需要導(dǎo)出表格的位置,引入這2個(gè)包
import FileSaver from "file-saver"
import XLSX from "xlsx"
3.對(duì)el-table加上id屬性,注:作者試了ref菜拓,不能用
<el-table
id="mytable"
:data="userData"
border>
4.設(shè)置導(dǎo)出的事件行為
<el-button @click="output" >導(dǎo)出</el-button>
5.寫output方法,直接復(fù)制就行了
output(){
var wb = XLSX.utils.table_to_book(document.querySelector("#mytable"));//mytable為表格的id名
/* get binary string as output */
var wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array"
});
try {
FileSaver.saveAs(
new Blob([wbout], { type: "application/octet-stream" }),
"sheet1.xlsx"http://導(dǎo)出的表名
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;
}