标签：Vue name 表格 普陀区 导出 Excel htmlToExcel Element 2016
在做一个带出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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。