注：如遇到复杂表格时可用此方法做前端导出
导出事件
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>
导出表格样式
