JS前端将table导出到excel 兼容谷歌 IE 且保留表格样式

最新推荐文章于 2024-06-03 16:46:10 发布

Be Patient K

最新推荐文章于 2024-06-03 16:46:10 发布

阅读量1.7k

点赞数 3

本文链接：https://blog.csdn.net/zz210891470/article/details/94717644

版权

    function exportExcel(){
        //tb是div 里面包着 table,这里就是取出table的html
		var lHtml = document.getElementById("tb").innerHTML;
         //这里重新组成一个你需要的文档，记得要将你需要的table样式复制写入到head头部里否则
//导出来没有表格样式 下面style标签里就是我自定义的表格样式
    	 var tableHtml='<html><head><meta charset="UTF-8"><style>table{border-top:solid 1px #000; border-left:solid 1px #000;} td{height:25px;line-height:25px; font-size:12px; font-family:"宋体"; text-align:center; border-bottom:solid 1px #000; border-right:solid 1px #000;}   #tab td{height:25px;line-height:25px; font-size:12px; font-family:"宋体";width: 82px;border-left:0px; border-bottom:solid 1px #000; border-right:solid 1px #000;} </style></head><body>';
		 tableHtml += lHtml;
		 tableHtml += '</body></html>';
		 var excelBlob = new Blob([tableHtml], {type: 'application/vnd.ms-excel'});
		 var fileName = "EXCEL.xls";
		 if(isIE()){
			window.navigator.msSaveOrOpenBlob(excelBlob,fileName);
		 }else{
			var oa = document.createElement('a');
			oa.href = URL.createObjectURL(excelBlob);
			oa.download = fileName;
			document.body.appendChild(oa);
			oa.click();
		}
	
    }

我要导出的html页面大概像下面这样，table内容是我要导出到execl中的
 <div id="tb"> 
<table border="0" cellpadding="0" cellspacing="0" style="width:1390px;" id="tables">
  <tr>
    <td colspan="17" style="font-family:'宋体'; font-size:20px; line-height:40px;"><span id="span_year"></span>xxxx分析表</td>
  </tr>
 <tr>
    <td style="width:80px;">&nbsp;</td>
    <td colspan="2">&nbsp;</td>
    <td colspan="2">&nbsp;</td>
    <td style="width:80px;">1月份</td>
    <td style="width:80px;">1～2月份</td>
    <td style="width:80px;">1～3月份</td>
    <td style="width:80px;">1～4月份</td>
    <td style="width:80px;">1～5月份</td>
    <td style="width:80px;">1～6月份</td>
    <td style="width:80px;">1～7月份</td>
    <td style="width:80px;">1～8月份</td>
    <td style="width:80px;">1～9月份</td>
    <td style="width:80px;">1～10月份</td>
    <td style="width:80px;">1～11月份</td>
    <td style="width:80px;">1～12月份</td>
  </tr>
</table>
</div>

参考大神链接：https://blog.csdn.net/qq_34169240/article/details/84231226