注：如遇到复杂表格时可用此方法做前端导出
导出事件
handleDown() {
var html = "<html><head><meta charset='utf-8' /></head><body>" + document.getElementsByTagName("table")[0].outerHTML + "</body></html>";
var blob = new Blob([html], { type: "application/vnd.ms-excel" });
var a = document.getElementsByTagName("a")[0];
a.href = URL.createObjectURL(blob);
a.download = "每日检查记录表.xls";
}页面样式
<template>
<div class="mod-config">
<div style="width: 100%">
<div id="demo">
<div class="toptitle" @click="handleDown">
<a>下载</a>
</div>
<table border="1" class="table_style">
<tbody>
<tr style="font-weight:bold">
<td rowspan="1">点检人</td>
<td rowspan="1"></td>
<td colspan="1">
<div>点检日期：</div>20 年 月 日
</td>
<td colspan="1" width="50">审核人</td>
<td colspan="2"></td>
</tr>
<tr style="font-weight:bold">
<td width="50">序号</td>
<td width="90">设备和设施</td>
<td width="120">巡视检查内容</td>
<td width="60">正常</td>
<td width="50">异常</td>
<td>相关说明</td>
</tr>
<template v-for="(item, i) in tableList" :key="'aaa'+i">
<template v-for="(itemj, j) in item.childList" :key="'bbb'+j">
<tr>
<td :rowspan="item.childList.length" v-if="j==0" style="text-align:center">{
{i+1}}</td>
<td :rowspan="item.childList.length" v-if="j==0">{
{ item.checkcontent }}</td>
<td>{
{itemj.name}}</td>
<td>{
{itemj.status==1?'正常':''}}</td>
<td>{
{itemj.status!=1?'故障':''}}</td>
<td>{
{itemj.describe}}</td>
</tr>
</template>
</template>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
export default {
name: "PdfDemo",
data() {
return {
tableList: [
{
checkcontent: "生产设施",
childList:[
{ name: '生产设施运行负荷', status: 1, describe:'生产负荷变大，VOCs 治理设施运行负荷增大'},
],
},
{
checkcontent: "VOCs治理设施",
childList:[
{name: '总用电量及其它能源耗量', status: 1, describe: '用电量、燃料等能耗变化，指征VOCs治理设施运行负荷变化'},
],
},
{
checkcontent: "密闭排风设施",
childList:[
{ name: '设施周边气味状况', status: 1, describe:'气味变大，密闭性变差'},
{ name: '设施开口面积', status: 1, describe:'开口面积变大，捕集效果变差'},
{ name: '设施内外压差 P1', status: 0, describe:'负压变小，逸散变多'},
],
},
{
checkcontent: "局部排风设施",
childList:[
{ name: '散发源周边气味状况', status: 1, describe:'气味变大，捕集效果变差'},
{ name: '设施与散发源距离', status: 1, describe:'距离变大，逸散变多'},
],
},
{
checkcontent: "颗粒过滤器",
childList:[
{
name: '流程压差 P2/P3', status: 1, describe: '流程压差变高，处理风量变少;流程压差变低，滤料短路或破损问题变大'},
],
},
],
};
},
methods: {
handleDown() {
var html = "<html><head><meta charset='utf-8' /></head><body>" + document.getElementsByTagName("table")[0].outerHTML + "</body></html>";
var blob = new Blob([html], { type: "application/vnd.ms-excel" });
var a = document.getElementsByTagName("a")[0];
a.href = URL.createObjectURL(blob);
a.download = "每日检查记录表.xls";
},
},
};
</script>
<style lang='less' scoped>
#demo {
background-color: #fff;
width: 850px;
/* height: 400px; */
margin: auto;
padding: 40px;
box-sizing: border-box;
.toptitle {
text-align: center;
font-size: 25px;
font-weight: bold;
display: flex;
justify-content: center;
margin-bottom: 20px;
}
}
.table_style td,
th {
padding: 10px;
font-size: 15px;
}
.table_style {
border-collapse: collapse;
width: 100%;
text-align: center;
}
.sign{
text-align: right;
&>span{
float: left;
}
}
</style>
导出表格样式
