昨天用element-ui写表格 做表格的导出数据,遇到了导出的时候excel表格数据重复的bug 在网上找了很多资料,后来求朋友帮忙解决,也是想着自己做个记录 以后再遇到同样的问题,可以直接解决,也是想分享给跟我一样遇到的问题朋友,这个问题和我朋友帮我解决的,也多亏了他的帮助才能解决这个问题 所以自己要记录一下,最后也谢谢我的那位朋友,如果大家遇到同样的问题 也可以借鉴一下!!!
附加代码
exportExcel() {
let fix = document.querySelector('.el-table__fixed');
let oHtml1=document.getElementById('table-1').children[1].removeChild(fix)
let oHtml = oHtml1.outerHTML;
let excelHtml = `
<html>
<head>
<meta charset='utf-8' />
<style>
h3{
text-align: center;
}
table{
min-width: calc(100vw - 290px);
/*margin-top: 50px;*/
border-collapse: collapse;
border-spacing: 0;
border: 1px #eee solid;
border-radius: 50px;
}
table tr{
height:50px;
border: 1px #eee solid;
white-space: nowrap;
}
table tr th{
border: 1px #eee solid;
background-color: #E7E6E6;
}
thead tr td{
background-color: #E7E6E6;
}
.td1{
background-color: #E7E6E6;
}
.td2{
background-color: #E7E6E6;
}
.td3{
background-color: #E7E6E6;
}
.td4{
background-color: #E7E6E6;
}
table tr td{
border: 1px #eee solid;
white-space: nowrap;
padding: 30px 20px;
text-align: center;
}
</style>
</head>
<body>
<h3> ${this.dataFrom.yearNum} 年度标题</h3>
${oHtml}
</body>
</html> `;
// 生成blob对象
let excelBlob = new Blob([excelHtml], {
type: "application/vnd.ms-excel",
});
console.log(oHtml1,'oHtml1')
console.log(oHtml,'oHtml')
// 创建一个a标签
let oA = document.createElement("a");
// 利用URL.createObjectURL()方法为a元素生成blob URL
oA.href = URL.createObjectURL(excelBlob);
// 给文件命名
oA.download = `${this.dataFrom.yearNum}年度评价结果汇算表.xlsx`;
// 模拟点击
oA.click();
document.getElementById('table-1').children[1].appendChild(fix)
},