前端导出Excel兼容写法
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端导出Excel兼容写法相关的知识，希望对你有一定的参考价值。
今天整理出在Web前端导出Excel的写法，写了一个工具类，对各个浏览器进行了兼容。
首先，导出的数据来源可能有两种：
1. 页面的html内容（一般是table）
2. 纯数据
PS：不同的数据源，导出的写法也是不相同的。
技术方案
IE
无论数据来源是哪里，都是用ActiveXObject对象及相关的命令，IE10、11有点不同。
非IE
纯数据的，使用一个FileSaver.js，如果有浏览器不支持Blob的，还需要引入Blob.js，来做导出。
HTML内容的，构造一个base64www.fsmaxbuy.com/ 字符串的路径，跳转地址下载，其实也可以将数据抽出来，用纯数据的方式。
PS：自行了解Blob对象。
关键问题
1. 非IE导出纯数据中文乱码
解决方法：在Blob的数据要加上"\\uFEFF"做修正。
2. Safari的Blob报TypeError: ‘[object BlobConstructor]‘ is not a constructor
原因：应该Safari的Blob是不完整的。
解决方法：需要引入一个Blob.js做修正，不过下载的文件会显示"www.huacairen88.cn 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 && www.huacairen88.cn 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: "text/plain" || 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>
总结
这个导出Excel工具类兼容了Chrome、Firefox、www.wx1677.com/ Safari（不完美）、IE6-11，针对两种数据源都做了处理。一般来说，纯数据导出的效果是最好的，所以如果HTML内容导出方式不满意，可以将数据抽出
以上是关于前端导出Excel兼容写法的主要内容，如果未能解决你的问题，请参考以下文章