elementUI 将el-table表格导出excel文件
elementUI 将el-table表格导出excel文件1 首先安装依赖:xlsx、file-saver:npm install xlsx --savenpm install file-saver --save2在main.js中导入// vue中导出excel表格模板import FileSaver from 'file-saver'import XLSX from 'xlsx'Vue.pr
·
elementUI 将el-table表格导出excel文件
1 首先安装依赖:xlsx、file-saver:
npm install xlsx --save
npm install file-saver --save
2在main.js中导入
// vue中导出excel表格模板
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
Vue.prototype.$FileSaver = FileSaver; //设置全局
Vue.prototype.$XLSX = XLSX; //设置全局
2点击导出按钮
<el-button @click="$router.push('/addressAdd')" type="primary" icon="el-icon-edit" >添加地址</el-button>
<el-button @click="exportToExcel">导出</el-button>
<el-table
id="out-table"
ref="multipleTable"
:data="tableData"
:header-cell-style="{background:'#ccc',color: ' #333'}"
:show-header="true"
style="width: 100%"
:highlightCurrentRow="true"
>
<el-table-column prop="id" label="编号"></el-table-column>
<el-table-column prop="member_id" label="会员id"></el-table-column>
<el-table-column prop="receive_name" label="收货人姓名">
</el-table-column>
<el-table-column prop="tel" label="电话">
</el-table-column>
<el-table-column prop="poscode" label="邮编">
</el-table-column>
<el-table-column prop="addmes" label="省市区/县">
</el-table-column>
<el-table-column prop="detail_address" label="详细地址">
</el-table-column>
<!--fixed="right"-->
<el-table-column
label="操作">
<template slot-scope="scope">
<el-button @click="edit(scope.row)" type="text" size="small">修改</el-button>
<el-button @click="deleteAddressVip(scope.row)" type="text" size="small">删除</el-button>
</template>
</el-table-column>
</el-table>
3在组件的methods中写入方法
methods: {
// 点击按钮 导出excel表格:
exportToExcel: function() {
let tables = document.getElementById("out-table");
let table_book = this.$XLSX.utils.table_to_book(tables);
var table_write = this.$XLSX.write(table_book, {
bookType: "xlsx",
bookSST: true,
type: "array"
});
try {
this.$FileSaver.saveAs(
new Blob([table_write], { type: "application/octet-stream" }),
"sheetjs.xlsx"
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, table_write);
}
return table_write;
},
}
4注意:
this.$XLSX.utils.table_to_book中放的是table的dom节点
sheetjs.xlsx导出的是表格的名字
更多推荐
已为社区贡献1条内容
所有评论(0)