Vue+Element表格通过前端导出为Excel文件
作者：互联网
在做一个带出Excel功能，本来想的是后端导出，但是表格格式比较复杂，涉及到合并现实这些操作 需要跟前端保持一致，所以就在网上找了下前端导出的插件。
以下做个记录
注：此方法能够导出多级表格，默认已安装ElementUI。
1。安装xlsx库
npm install xlsx
2。编写保存函数，文件位置：src/utils/htmlToExcel.js
import XLSX from 'xlsx';
const htmlToExcel = {
getExcel(dom, title = 'temp'){
var excelTitle = title;
var wb = XLSX.utils.table_to_book(document.querySelector(dom));
try {
XLSX.writeFile(wb, excelTitle + '.xlsx');
} catch (e) {
if (typeof console !== 'undefined') {
console.log(e);
alert('导出失败!');
// console.log(e, wbout);
}
}
// return wbout;
},
};
export default htmlToExcel;
3.使用函数，文件位置src/views/TablePage.vue
注:表格导出实现解释，给展示表格添加选择功能，通过handleSelectionChange函数将选中数据与selectData绑定，在选中需要导出数据后点击导出按钮，展示el-dialog并将selectData数据展示在el-dialog中的表格，此表格为最后导出的表格，所以id赋值selectTable，最后确认打印调用exportExcel函数，通过htmlToExcel.getExcel('#selectTable','导出的自定义标题')导出Excel文件。
<template>
<div>
<!--导出按钮-->
<el-button type="primary" style="margin:20px;" @click="exportExcelSelect">导出Excel</el-button>
<!--原始表格-->
<el-table
:data="tableData"
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
>
</el-table-column>
<el-table-column
prop="date"
label="日期"
>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
>
</el-table-column>
<el-table-column label="详细地址">
<el-table-column
prop="province"
label="省份"
>
</el-table-column>
<el-table-column
prop="city"
label="市区"
>
</el-table-column>
<el-table-column
prop="address"
label="地址"
>
</el-table-column>
<el-table-column
prop="zip"
label="邮编"
>
</el-table-column>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
>
<template>
<el-button type="text" size="small">查看</el-button>
<el-button type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
<!--预览弹窗表格-->
<el-dialog title="表格保存预览" width="70%" :visible.sync="selectWindow">
<el-table :data="selectData" id="selectTable" height="380px">
<el-table-column
prop="date"
label="日期"
>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
>
</el-table-column>
<el-table-column label="详细地址">
<el-table-column
prop="province"
label="省份"
>
</el-table-column>
<el-table-column
prop="city"
label="市区"
>
</el-table-column>
<el-table-column
prop="address"
label="地址"
>
</el-table-column>
<el-table-column
prop="zip"
label="邮编"
>
</el-table-column>
</el-table-column>
</el-table>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="exportExcel">确定保存</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import htmlToExcel from '@/utils/htmlToExcel'
export default {
name: "ExcelPage",
data(){
return{
//表格数据
tableData: [
{
date: '2016-05-03',
name: '王小天',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小明',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-04',
name: '王小智',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-01',
name: '王小红',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-08',
name: '王小华',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-06',
name: '王小丽',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-07',
name: '王小花',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}
],
//表格中选中的数据
selectData:[],
selectWindow:false,
}
},
methods:{
//导出
exportExcel() {
htmlToExcel.getExcel('#selectTable','导出的自定义标题')
},
//显示预览弹窗
exportExcelSelect(){
if (this.selectData.length < 1){
this.$message.error('请选择要导出的内容！');
return false;
}
this.selectWindow = true;
},
//选中数据
handleSelectionChange(val) {
this.selectData = val;
}
}
}
</script>
<style scoped>
</style>
因为这个是按照element ui里的表格导出，所以如果要过滤不必要的字段，可以再加一层数据筛选，然后导出筛选过后的表格
参考1：https://juejin.cn/post/6914824008043069448
标签：Vue,name,表格,普陀区,导出,Excel,htmlToExcel,Element,2016 来源： https://www.cnblogs.com/houying/p/15839239.html