开发者社区> 技术小美> 正文

前端导出Excel兼容写法

简介:
+关注继续查看

今天整理出在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(); 
//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 data window.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

 


本文转自 海角在眼前 博客园博客,原文链接:http://www.cnblogs.com/lovesong/p/6045405.html   ,如需转载请自行联系原作者


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
给我实现一个前端的 Excel 导入和导出功能(二)
给我实现一个前端的 Excel 导入和导出功能
33 0
给我实现一个前端的 Excel 导入和导出功能(一)
给我实现一个前端的 Excel 导入和导出功能
64 0
vue导出excel表格-后端返回blob流文件,前端接收并导出(处理导出以后打开文件损坏问题)
vue导出excel表格-后端返回blob流文件,前端接收并导出(处理导出以后打开文件损坏问题)
337 0
纯前端用XLSX库导出excel,可含多个sheet
纯前端用XLSX库导出excel,可含多个sheet
92 0
前端实现导出word(docxtemplater、pizzip、jszip-utils、file-saver )
docxtemplater、pizzip、jszip-utils、file-saver 前端实现导出word
310 0
有关后端使用Springboot导出Excel,前端使用vue实现Excel下载的功能实现
有关后端使用Springboot导出Excel,前端使用vue实现Excel下载的功能实现
157 0
VUE element-ui 之table表格导出Excel功能封装(纯前端实现)
VUE element-ui 之table表格导出Excel功能封装(纯前端实现)
176 0
如何使用JavaScript实现前端导入和导出excel文件(H5编辑器实战复盘)
最近笔者终于把H5-Dooring的后台管理系统初步搭建完成, 有了初步的数据采集和数据分析能力, 接下来我们就复盘一下其中涉及的几个知识点,并一一阐述其在Dooring H5可视化编辑器中的解决方案. 笔者将分成3篇文章来复盘, 主要解决场景如下
464 0
前端摸鱼神器,设计稿一键导出 「小程序/Vue/Uni-app」代码
这款神器就是「CodeFun」,它号称“UI 设计稿智能生成源代码,10 分钟完成 8 小时工作量”,让我们做前端,不搬砖
667 0
+关注
技术小美
文章
问答
视频
文章排行榜
最热
最新
相关电子书
更多
前端代码是怎样智能生成的
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载