一 :安裝依賴
npm install xlsx file-saver --save
二 :引入
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
三:下載
- 單表格下載
<template>
<div>
<el-button type="primary" @click="downExcel">下載至Excel</el-button>
<el-table id="example" :data="listData">
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="性別" prop="sex"></el-table-column>
<el-table-column label="年齡" prop="age"></el-table-column>
</el-table>
</div>
</template>
<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default {
data() {
return {
listData: [{
name:'aa',
sex:'男',
age:10
},{
name:'bb',
sex:'女',
age:12
},{
name:'cc',
sex:'男',
age:15
}]
};
},
methods: {
//下載數據至Excel
downExcel() {
let et = XLSX.utils.table_to_book(document.getElementById("example")); //此處傳入table的DOM節點
let etout = XLSX.write(et, {
bookType: "xlsx",
bookSST: true,
type: "array"
});
try {
FileSaver.saveAs(
new Blob([etout], {
type: "application/octet-stream"
}),
`人員信息.xlsx`
); //導出的文件名
} catch (e) {
console.log(e, etout);
}
return etout;
}
}
};
</script>
<style scoped>
</style>
- 多表格下載
<template>
<div>
<el-button type="primary" @click="downExcel">下載至Excel</el-button>
<el-table id="Table1" :data="listData">
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="性別" prop="sex"></el-table-column>
<el-table-column label="年齡" prop="age"></el-table-column>
</el-table>
<el-table id="Table2" :data="listData1">
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="科目" prop="subject"></el-table-column>
<el-table-column label="成績" prop="achievement"></el-table-column>
</el-table>
</div>
</template>
<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default {
data() {
return {
listData: [{
name:'aa',
sex:'男',
age:10
},{
name:'bb',
sex:'女',
age:12
},{
name:'cc',
sex:'男',
age:15
}],
listData1: [{
name:'aa',
subject:'語文',
achievement:98
},{
name:'aa',
subject:'數學',
achievement:95
},{
name:'aa',
subject:'英語',
achievement:96
}],
};
},
methods: {
//下載數據至Excel
downExcel() {
var workbook = XLSX.utils.book_new();
/* convert table 'table1' to worksheet named "Sheet1" */
var ws1 = XLSX.utils.table_to_sheet(document.getElementById('Table1'));
XLSX.utils.book_append_sheet(workbook, ws1, "sheet1");
/* convert table 'table2' to worksheet named "Sheet2" */
var ws2 = XLSX.utils.table_to_sheet(document.getElementById('Table2'));
XLSX.utils.book_append_sheet(workbook, ws2, "sheet2");
/* get binary string as output */
var wbOut = XLSX.write(workbook, {
bookType: "xlsx",
bookSST: true,
type: "array"
});
try {
FileSaver.saveAs(
new Blob([wbOut], { type: "application/octet-stream" }),
"信息.xlsx"
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbOut);
}
return wbout;
}
}
};
</script>
<style scoped>
</style>