使用 xlsx 插件 npm install xlsx --save
使用 xlsx-style 插件 npm install xlsx-style --save
使用 file-saver 插件 npm install xlsx-style --save
import XLSX from "xlsx";
import FileSaver from "file-saver";
import XLSXStyle from "xlsx-style";
正文:
<template>
<div>
<el-table :data="tableData" style="width: 600px;" id="tableExcel">
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
<el-button style="margin-top:20px;" @click="exportBtn">导出</el-button>
</div>
</template>
<script>
import XLSX from "xlsx";
import FileSaver from "file-saver";
import XLSXStyle from "xlsx-style";
export default {
data() {
return {
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄"
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄"
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄"
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄"
}
]
};
},
methods: {
exportBtn() {
if (this.tableData.length > 0) {
let xlsxParam = { raw: true }; //转换成excel时,使用原始的格式
// 获取table的dom元素
let vv = XLSX.utils.table_to_book(
document.getElementById("tableExcel"),
xlsxParam
);
let JIA = [{}, {}, {}];
vv["Sheets"]["Sheet1"]["!cols"] = [];
let vvs = vv["Sheets"]["Sheet1"];
for (const key in vvs) {
if (key.indexOf("!") === -1 && vvs[key].v) {
vvs[key].s = {
alignment: {
horizontal: "center",
vertical: "center",
wrap_text: true
}
};
}
}
JIA.forEach(item => {
// excel表格的单元格宽度
vv["Sheets"]["Sheet1"]["!cols"].push({ wpx: 200 });
});
let vbouts = XLSXStyle.write(vv, {
bookType: "xlsx",
bookSST: true,
type: "buffer"
});
try {
FileSaver.saveAs(
// 这是下载的excel文件名
new Blob([vbouts], { type: "application/octet-stream" }),
"导出清单.xlsx"
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, vbouts);
}
return vbouts;
} else {
this.$message.error("当前数据为空,导出失败!");
}
}
}
};
</script>
<style>
</style>