前端导出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内容导出方式不满意，可以将数据抽出，用回纯数据导出。最后，这个工具缺失的是对大数据量导出的测试，不过这个后面有空再进行验证。
本文为原创文章，转载请保留原出处，方便溯源，如有错误地方，谢谢指正。
前端导出Excel兼容写法的更多相关文章
- js前端导出excel
此例子是利用html特性,纯前端导出excel,样式不好看,兼容主流浏览器. var tableid = jQuery(this).closest("div.tab-label-wrap&q ...
- 前端导出excel表
前端导出excel表 方式一: 前端js实现 : https://www.cnblogs.com/zhangym118/p/6235801.html 方式二: java后端实现: https://bl ...
- 前端导出Excel
1.首先,需要下载一个叫better-xlsx,的插件,以yarn 为例 ' yarn add better-xlsx --save '下载相关依赖包( npm 方式 ' npm i better-x ...
- 踹掉后端，前端导出Excel！
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一个下载链接,但有时候我们只想导出前端页面上已经有了的数据,不想再调后端导出接口浪费服务器资源,学习本文demo例子,我们踹掉后端,直接在前 ...
- vue项目，前端导出excel
今天研究一下前端如何导出excel,边查边实践,边记录 1.安装依赖库 xlsx:这是一个功能强大的excel处理库,但是上手难度也很大,还涉及不少二进制的东西 file-saver:ES5新增了相关 ...
- vue 纯前端导出 excel 表格
在开发后台管理系统的时候,很多地方都要用到导出excel 表格,比如将table中的数据导出到本地,那么实现这种需求往往有两种方案: 一.后端开发一个下载链接,前端将这个链接放到 a 标签的 href ...
- 前端导出excel数据-jsonToExcel
咳咳,好久没有写博了... 在工作中遇到了纯前端,将数据导出为excel文件.正文开始: 第一步 安装依赖: npm i xlsx 第二步 写导出函数: import XLSX from 'xlsx' ...
- JS导出excel 兼容ie、chrome、firefox
运用js实现将页面中的table导出为excel文件,页面显示如下: 导出的excel文件显示如下: 实现代码: <!DOCTYPE html> <html> <head ...
- js前端导出excel：json形式的导出
第一中形式的导出:主要是表头对应主体数据,json形式的导出 js库文件名称 : table2excel.js这个js库文件是网上找的,并且自己根据自己业务需求把内容改了一下复制到 table2exc ...
随机推荐
- 图解Spark API
初识spark,需要对其API有熟悉的了解才能方便开发上层应用.本文用图形的方式直观表达相关API的工作特点,并提供了解新的API接口使用的方法.例子代码全部使用python实现. 1. 数据源准备 ...
- 超千个节点OpenStack私有云案例（1）：CERN 5000+ 计算节点私有云
CERN:欧洲核子研究组织 本文根据以下几篇文章整理而来: https://www.openstack.org/summit/tokyo-2015/videos/presentation/unveil ...
- linux常用命令(3)mkdir命令
mkdir命令1 命令格式:mkdir [选项]目录名2 命令功能:通过 mkdir 命令可以实现在指定位置创建以 DirName(指定的文件名)命名的文件夹或目录.要创建文件夹或目录的用户必须对所创 ...
- 一不小心写了个WEB服务器
开场 Web服务器是啥玩意? 是那个托管了我的网站的机器么? No,虽然那个也是服务器,但是我们今天要说的Web服务器主要是指像IIS这样一类的,用于处理request并返回response的工具,没 ...
- DevExpress学习系列（控件篇）：GridControl的基本应用
一般属性设置 不显示分组框:Gridview->Option View->Show Group Panel=false 单元格不可编辑:gridcontrol -->gridview ...
- 系统中没有邮件客户端设置autoLink=email会挂掉的问题
TextView的autoLink属性为我们提供了很大的便利性,当文本中有网址,邮箱或电话的时候可以让我们方便地执行打电话发邮件等动作,不过也有一些问题,比如说设置autoLink包含email属性, ...
- RangePartitioner 实现简记
摘要: 1.背景 2.rangeBounds 上边界数组源码走读 3.RangePartitioner的sketch 源码走读 4.determineBounds 源码走读 5.关于RangePart ...
- Redis数据结构详解之Zset（五）
序言 Zset跟Set之间可以有并集运算,因为他们存储的数据字符串集合,不能有一样的成员出现在一个zset中,但是为什么有了set还要有zset呢?zset叫做有序集合,而set是无序的,zset怎么 ...
- Android总结之Gzip/Zip压缩
前言: 做过Android网络开发的都知道,在网络传输中我们一般都会开启GZIP压缩,但是出于刨根问底的天性仅仅知道如何开启就不能满足俺的好奇心的,所以想着写个demo测试一下比较常用的两个数据压缩方 ...
- ASP.NET 5 Target framework dnx451 and dnxcore50
中文不知如何定义标题,所以干脆就直接贴出关键字,在 ASP.NET 5 项目的 project.json 配置文件中,会有这样的定义: "frameworks": { " ...