前端导出Excel兼容写法

今天整理出在Web前端导出Excel的写法，写了一个工具类，对各个浏览器进行了兼容。

首先，导出的数据来源可能有两种：

1. 页面的HTML内容（一般是table）

2. 纯数据

PS：不同的数据源，导出的写法也是不相同的。

技术方案

无论数据来源是哪里，都是用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 dataor 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(); //there ie10、11 will be error, i don't know why, but also can export} catch(e){}sel.execCommand("Copy"); oSheet.Paste();} else {for(; i < datas.length; i++){  var row = datas[i]; for (j = 0; j < row.length; j++) { oSheet.Cells(i + 1, j + 1).value = row[j]; }   }                }  oXL.Visible = true;           },__oTherExport : function(datas, fileName){if(typeof datas === 'string'){var elem = document.getElementById(datas),content = EXCE_TEMPLATE.replace("{html}", elem.outerHTML);//TODO: need test large amount of datawindow.location.href = EXCEL_URI +                        window.btoa(unescape(encodeURIComponent(content)));                   } else {var blob,i = 0,j,str = __PREVFIX; for(; i < datas.length; i++){  var row = datas[i]; // the value add double quotation marks on both sides, for separate values.str += "\""+ row.join("\",\"") + "\"\n"; } //on safari:  TypeError: '[object BlobConstructor]' is not a constructor (evaluating 'new Blob([str],{//import Blob.js to fix, but still have a problem : the fileName will be 'Unknown' ,                    //but if you add suffix name, content can be seen.blob = new Blob([str],{type: EXCEL_CONTENTTYPE});saveAs(blob, fileName || "Download.xls");    }}    }window.ExportUtil = Export;
})();

演示示例：

<!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="Blob.js"></script><script src="FileSaver.min.js"></script><script src="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内容导出方式不满意，可以将数据抽出，用回纯数据导出。最后，这个工具缺失的是对大数据量导出的测试，不过这个后面有空再进行验证。

本文为原创文章，转载请保留原出处，方便溯源，如有错误地方，谢谢指正。

本文地址：http://www.cnblogs.com/lovesong/p/6045405.html

转载于:https://www.cnblogs.com/lovesong/p/6045405.html

前端导出Excel兼容写法相关推荐

前端导出excel兼容IE和主要浏览器
前端导出excel兼容IE和主要浏览器前端导出excel所见即所得,比较简单,代码送上 1.页面调用 <a class="img-button margin_r_5" hr ...
vue基于Blob.js和Export2Excel.js做前端导出excel兼容ie
这里简单的说一下兼容ie的想法,至于vue怎么使用这两个文件做导出excel这里不加叙述,不会的请自动百度或评论私聊. 对于这个问题的产生,我有两种猜想供讨论,有兴趣的可以验证下是由于ie的版本产生 ...
前端导出excel(element+xlsx+filesaver插件),表格数据重复问题解决
纯前端导出excel,表格数据渲染重复业务需求页面有table表格里的多条数据,并且没有分页.需求希望不调用接口,纯前端生成excel文件实现导出功能. 效果图 1.安装依赖(xlsx 和 fil ...
xlsx模块前端_利用xlsx-syle前端导出excel且支持自定义样式
利用xlsx-syle前端导出excel且支持自定义样式前言本文的代码是基于react的. 本文仅用于记录我在前端导出excel遇到的问题的笔记整理. 需求描述需要前端来实现对数据的导出,导出成 ...
Vue实现在前端导出Excel
安装依赖进入项目文件夹,打开cmd或者在Webstorm中的Terminal中输入: npm install -S file-saver xlsx npm install -D script-loa ...
vue-json-excel前端导出excel教程
vue-json-excel是一个专门为解决前端导出Excel而开发的一个组件库. 个人认为,导出在前端做,不是特别合适,最好是后端提供导出下载文件接口,如果后端确实不想提供接口,要让你做前端导出,那 ...
excel导出_学习笔记—— 前端导出excel
这两天工作上来了两个需求,一个是打印的功能,一个是导出的功能.功能其实之前已经做出来了,打印我用的是printjs的插件,excel用的是Export2Excel.js,但是产品要求打印页面和导出的e ...
vue导出excel加一个进度条_Vue实现在前端导出Excel
安装依赖进入项目文件夹,打开cmd或者在Webstorm中的Terminal中输入: npm install -S file-saver xlsx npm install -D script-loa ...
前端导出excel自定义样式(行高除外)
前端导出excel需要用到的依赖有xlsx.xlsx-style import XLSX from 'xlsx'; import XLSXStyle from 'xlsx-style'; npm in ...
vue+elementui表格前端导出excel以及自定义导出样式
vue+elementui表格前端导出excel以及自定义导出样式项目遇到前端自己导出表格,我自己把后端给我的数据处理了一波,合并重复列啊,以及表头合并啊.可没想到导出竟然也要前端自己来弄,于是乎请 ...

前端导出Excel兼容写法

前端导出Excel兼容写法相关推荐

最新文章

热门文章