今天整理出在Web前端导出Excel的写法，写了一个工具类，对各个浏览器进行了兼容。首先，导出的数据来源可能有两种：1. 页面的HTML内容（一般是table）2. 纯数据PS：不同的数据源，导出的写法也是不相同的。技术方案IE无论数据来源是哪里，都是用ActiveXObject ...
今天整理出在Web前端导出Excel的写法，写了一个工具类，对各个浏览器进行了兼容。
首先，导出的数据来源可能有两种：
1. 页面的HTML内容（一般是table）
2. 纯数据
PS：不同的数据源，导出的写法也是不相同的。
技术方案
IE
无论数据来源是哪里，都是用ActiveXObject对象及相关的命令，IE10、11有点不同。
非IE
纯数据的，使用一个FileSaver.js，如果有浏览器不支持Blob的，还需要引入Blob.js，来做导出。
HTML内容的，构造一个base64字符串的路径，跳转地址下载，其实也可以将数据抽出来，用纯数据的方式。
PS：自行了解Blob对象。
关键问题
1. 非IE导出纯数据中文乱码
解决方法：在Blob的数据要加上"\uFEFF"做修正。
2. Safari的Blob报TypeError: '[object BlobConstructor]' is not a constructor
原因：应该Safari的Blob是不完整的。
解决方法：需要引入一个Blob.js做修正，不过下载的文件会显示"UnKnown"，但加上后缀名xls，文件内容还是可以看的（暂时没有很好办法）。
3. Blob每个值是以逗号分隔，那数据有逗号怎么办
解决方法：需要在每个值额外裹上双引号，这样不会影响导出结果，导出内容也是正确的。
4. 非IE导出HTML内容（非table），样式丢失
解决方法：额，这个没有办法，可以将数据抽出来，用纯数据的方式导出。
代码实现
(function(){ var EXCEL_CONTENTTYPE = "application/vnd.ms-excel;", EXCEL_URI = 'data:application/vnd.ms-excel;base64,', EXCE_TEMPLATE = '<html><head><meta charset="UTF-8"></head><body>{html}</body></html>', __PREVFIX = "\uFEFF", ieVersion = window.navigator.userAgent.toLowerCase().match(/(msie\s|trident.*rv:)([\w.]+)/), useIE = ieVersion && ieVersion[2] < 10, isIE1011 = ieVersion && ieVersion[2] > 9; var Export = { /* *@param datas Two-dimensional array : datas, export only with data or String : DOM id, export html content *@param fileName export file name */ toExcel: function(datas, fName){ var isId = typeof datas === 'string'; if(isId || datas instanceof Array){ if(useIE || isId && isIE1011){ Export.__ieExport(datas); } else{ Export.__oTherExport(datas, fName); } } else{ alert("datas params need Two-dimensional array or String."); } }, __ieExport : function(datas){ var oXL = new ActiveXObject("Excel.Application"), oWB = oXL.Workbooks.Add(), oSheet = oWB.ActiveSheet, i = 0, j; if(typeof datas === 'string'){ var elem = document.getElementById(datas); var sel = document.body.createTextRange(); sel.moveToElementText(elem); try{ sel.select(); 演示示例：
<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title>demo</title> <style type="text/css"> ul{ list-style:none; padding:0px; margin:0px; width:590px; height:20px; line-height:20px; border:1px solid #99CC00; border-top:0px; font-size:12px;} ul li{ display:block; width:33%; float:left;text-indent:2em} .th{ background:#F1FADE; font-weight:bold; border-top:1px } </style></head><body><div> <table id="tb" border=4 width=250 align=center> <caption>【表格举例】</caption> <tr bgcolor="#cccccc"> <th><br></th> <th>列-A</th> <th>列-B</th> <th>列-C</th> </tr> <tr align=center> <td>行-1</td> <td>A1</td> <td>B1</td> <td rowspan=2>C1-C2</td> </tr> <tr align=center> <td>行-2</td> <td>A2</td> <td>B2</td> </tr> <tr align=center> <td>行-3</td> <td>A3</td> <td colspan=2>A3-B3</td> </tr> </table> <div id="tul"> <h1><a href="http://www.66css.com">www.66css.com</a></h1> <ul class="th"> <li>姓名</li> <li>班级</li> <li>年龄</li> </ul> <ul> <li>阿三</li> <li>3-1</li> <li>13</li> </ul> <ul> <li>小龙</li> <li>2-4</li> <li>16</li> </ul> <ul> <li>大马</li> <li>5-3</li> <li>17</li> </ul> </div> <script src='/images/loading.gif' data-original="Blob.js"></script> <script src='/images/loading.gif' data-original="FileSaver.min.js"></script> <script src='/images/loading.gif' data-original="ExportUtil.js"></script><!--工具类--> <script> //demo 1 ExportUtil.toExcel([ ["学号", "姓名", "年龄"], ["001", "张学友", "40"], ["002", "张信哲", "38"], ["003", "林志炫", "41"], ["004", "刘亦菲", "24"], ["005", "贾玲", "30"], ["006", "陈一发", "23"] ],"hello.xls"); //demo2 ExportUtil.toExcel("tb"); //demo3 ExportUtil.toExcel("tul"); //ie的有样式，但某些样式会丢失。 </script></body></html>代码下载
我将完整代码放这：https://github.com/codingforme/code-learn/tree/master/export-excel
总结
这个导出Excel工具类兼容了Chrome、Firefox、Safari（不完美）、IE6-11，针对两种数据源都做了处理。一般来说，纯数据导出的效果是最好的，所以如果HTML内容导出方式不满意，可以将数据抽出，用回纯数据导出。最后，这个工具缺失的是对大数据量导出的测试，不过这个后面有空再进行验证。
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：前端导出Excel兼容写法
关键词：前端
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
