JS导出Excel（使用Blob），兼容IE，且保留样式

JS实现html导出Excel，兼容IE浏览器

     var tableHtml='<html><head><meta charset="UTF-8"></head><body>';
	 tableHtml += lHtml;
	 tableHtml += '</body></html>';
	 var excelBlob = new Blob([tableHtml], {type: 'application/vnd.ms-excel'});
	 var fileName = "变电设备"+dialogname+".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();
	 }

    //判断是否IE浏览器
    function isIE() {
		if (!!window.ActiveXObject || "ActiveXObject" in window) {
			return true;
		} else {
			return false;
		}
	}

其中lHtml是 table的html代码，如：

var lHtml = "<table border='1' style='width: 750px;height: 242px; border:1px solid ;border-collapse: collapse;border-color:#000;background-color:white;' align='center'><tr style='border: 0px;'><td colspan='5' style='height: 50px;font-size:21px;text-align: center;border: 0px;font-weight: bold;'>设备XXXXX报告</td></tr></table>"

简单来说，IE浏览器用window.navigator.msSaveOrOpenBlob(excelBlob,fileName);

非IE用a标签

以下是个jsp例子，jsp效果图：

导出的Excel效果图：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="/tags/mx-framework" prefix="mx" %>

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>html 表格导出道</title>
  <script language="JavaScript" type="text/javascript">
    
	//判断是否IE浏览器
    function isIE() {
		if (!!window.ActiveXObject || "ActiveXObject" in window) {
			return true;
		} else {
			return false;
		}
	} 
	
    function method() {
    	 var lHtml = document.getElementById("myDiv").innerHTML;
    	 var tableHtml='<html><head><meta charset="UTF-8"></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();
		}
     
    } 
  </script>
</head>
<body>
<div >
  <button type="button" onclick="method()">导出Excel兼容IE</button>
</div>
<div id="myDiv">
<table id="tableExcel" width="100%" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td colspan="5" align="center">html 表格导出道Excel</td>
  </tr>
  <tr style='background-color: #FFC000;text-align: center;'>
    <td>列标题1</td>
    <td>列标题2</td>
    <td>类标题3</td>
    <td>列标题4</td>
    <td>列标题5</td>
  </tr>
  <tr style='text-align: center;'>
    <td>aaa</td>
    <td>bbb</td>
    <td>ccc</td>
    <td>ddd</td>
    <td>eee</td>
  </tr>
  <tr style='text-align: center;'>
    <td>AAA</td>
    <td>BBB</td>
    <td>CCC</td>
    <td>DDD</td>
    <td>EEE</td>
  </tr>
  <tr style='text-align: center;'>
    <td>FFF</td>
    <td>GGG</td>
    <td>HHH</td>
    <td>III</td>
    <td>JJJ</td>
  </tr>
</table>
</div>
</body>
</html>

JS导出Excel（使用Blob），兼容IE，且保留样式

猜你喜欢