调用方法导出Excel表格数据重复的问题bug解决方法

最新推荐文章于 2024-03-21 05:19:58 发布

Keep of Dream

最新推荐文章于 2024-03-21 05:19:58 发布

阅读量720

点赞数 1

文章标签： css vue.js html

本文链接：https://blog.csdn.net/linwenbo1/article/details/128181386

版权

昨天用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)
    },