vue导出Excel(一)
引入工具库,下面代码是democnpm install -S file-saver xlsxcnpm install -D script-loader<template><div><el-button type="primary" @click="exportExcel">导出文件</el-button><el-table :data="tab
·
引入工具库,下面代码是demo
cnpm install -S file-saver xlsx
cnpm install -D script-loader
<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 XLSX from "xlsx";
export default {
name: "export",
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>
更多推荐
已为社区贡献15条内容
所有评论(0)