注：此方法能够导出多级表格，默认已安装ElementUI。
- 安装xlsx库
npm install xlsx
- 安装file-saver库
npm install file-saver
- 编写保存函数，文件位置：
src/utils/htmlToExcel.js
import FileSaver from "file-saver";
import XLSX from "xlsx";
const htmlToExcel = {
getExcel(dom,title='默认标题',){
var excelTitle = title;
var wb = XLSX.utils.table_to_book(document.querySelector(dom));
/* 获取二进制字符串作为输出 */
var wbout = XLSX.write(wb, {bookType: "xlsx",bookSST: true,type: "array"});
try {
FileSaver.saveAs(
new Blob([wbout], { type: "application/octet-stream" }),
excelTitle + ".xlsx"
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;
}
};
export default htmlToExcel;
- 使用函数，文件位置
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>
本文演示视频：点击浏览
更多前端内容欢迎关注公众号：天小天个人网
