1、引入xlsx、file-save
npm install xlsx --save
npm install file-saver --save
2、在具体模块引入xlsx和 file-saver
import FileSaver from "file-saver";
import * as XLSX from "xlsx";
3、完整代码
<template>
<div>
<el-button type="primary" @click="exportExcel">导出文件</el-button>
<el-table :data="tableData" style="width: 100%" id="out-table">
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="age" label="年龄" width="80"></el-table-column>
<el-table-column prop="date" label="日期"></el-table-column>
</el-table>
</div>
</template>
<script>
//引入安装的依赖
import FileSaver from "file-saver";
import * as XLSX from "xlsx";
export default {
data() {
return {
tableData: [
{
name: "张三",
age: 22,
date: "2016-05-02"
},
{
name: "王小虎",
age: 23,
date: "2016-05-04"
}
]
};
},
methods: {
// XLSX.uitls.table_to_book( 放入的是table 的DOM 节点 ) ,sheetjs.xlsx 即为导出表格的名字,可修改!
exportExcel() {
let wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
let wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array"
});
FileSaver.saveAs(
new Blob([wbout], { type: "application/octet-stream" }),
"用户列表.xlsx"
);
return wbout;
}
}
};
</script>
<style scoped>
</style>
4、参考