JS匯出Excel,相容IE,且保留樣式
阿新 • • 發佈:2018-12-22
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>