前端导出Excel兼容写法

时间:2022-04-05 11:17:48

今天整理出在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

前端导出Excel兼容写法的更多相关文章

  1. js前端导出excel

    此例子是利用html特性,纯前端导出excel,样式不好看,兼容主流浏览器. var tableid = jQuery(this).closest("div.tab-label-wrap&q ...

  2. 前端导出excel表

    前端导出excel表 方式一: 前端js实现 : https://www.cnblogs.com/zhangym118/p/6235801.html 方式二: java后端实现: https://bl ...

  3. 前端导出Excel

    1.首先,需要下载一个叫better-xlsx,的插件,以yarn 为例 ' yarn add better-xlsx --save '下载相关依赖包( npm 方式 ' npm i better-x ...

  4. vue项目,前端导出excel

    今天研究一下前端如何导出excel,边查边实践,边记录 1.安装依赖库 xlsx:这是一个功能强大的excel处理库,但是上手难度也很大,还涉及不少二进制的东西 file-saver:ES5新增了相关 ...

  5. vue 纯前端导出 excel 表格

    在开发后台管理系统的时候,很多地方都要用到导出excel 表格,比如将table中的数据导出到本地,那么实现这种需求往往有两种方案: 一.后端开发一个下载链接,前端将这个链接放到 a 标签的 href ...

  6. 前端导出excel数据-jsonToExcel

    咳咳,好久没有写博了... 在工作中遇到了纯前端,将数据导出为excel文件.正文开始: 第一步 安装依赖: npm i xlsx 第二步 写导出函数: import XLSX from 'xlsx' ...

  7. JS导出excel 兼容ie、chrome、firefox

    运用js实现将页面中的table导出为excel文件,页面显示如下: 导出的excel文件显示如下: 实现代码: <!DOCTYPE html> <html> <head ...

  8. js前端导出excel:json形式的导出

    第一中形式的导出:主要是表头对应主体数据,json形式的导出 js库文件名称 : table2excel.js这个js库文件是网上找的,并且自己根据自己业务需求把内容改了一下复制到 table2exc ...

  9. Vue实现在前端导出Excel 方法2

    也可以去看下我的方法1:https://www.cnblogs.com/yingyigongzi/p/10915382.html ----------------------------------- ...

随机推荐

  1. js--敏感词屏蔽

    <!doctype html><html><head><meta charset="utf-8"><meta name=&qu ...

  2. android隐藏底部虚拟键Navigation Bar实现全屏

    隐藏底部虚拟键Navigation Bar实现全屏有两种情况 第一种:始终隐藏,触摸屏幕时也不出现 解决办法:同时设置以下两个参数 View.SYSTEM_UI_FLAG_HIDE_NAVIGATIO ...

  3. tableView使用的易忘技术点(相对于自己)

    1.在tableView设置右向导航指示箭头 cell.accessoryType=UITableViewCellAccessoryDisclosureIndicator; 2.tableView的系 ...

  4. Windows中搭建已存在的Octopress环境

    // 当我们需要在不同的电脑上来对同一个Octopress博客进行维护的时候就需要针对已存在的Octopress来设置环境了, 安装相应的软件 Git:http://msysgit.googlecod ...

  5. centos性能监控系列三:监控工具atop详解

    引言 Linux以其稳定性,越来越多地被用作服务器的操作系统(当然,有人会较真地说一句:Linux只是操作系统内核:).但使用了Linux作为底层的操作系统,是否我们就能保证我们的服务做到7*24地稳 ...

  6. &lbrack;MVCSharp&rsqb;MVC&num; Overview概述

    MVC# Overview概述 Abstract: This article gives an overview of MVC# - a Model-View-Presenter framework ...

  7. Android学习笔记(SQLite的简单使用)

    1.SQLite介绍 SQLite,是一款轻型的数据库,是遵守ACID的关系型数据库管理系统,它包含在一个相对小的C库中.它是D.RichardHipp建立的公有领域项目.它的设计目标是嵌入式的,而且 ...

  8. zabbix web场景模拟监控配置

    一,zabbix2.2.3 VMware Vsphere exsi监控配置步骤, 1,添加监控主机 2,添加聚集macro;{$PASSWORD} = yoodo.com{$URL} = http:/ ...

  9. Sqlite常用sql语句

    sqlite常用sql语句 --返回UTC时间 select CURRENT_TIMESTAMP; --返回本地时间 select datetime(CURRENT_TIMESTAMP,'localt ...

  10. &lbrack;Abp 源码分析&rsqb;一、Abp 框架启动流程分析

    Abp 不一定仅用于 Asp.Net Core 项目,他也可以在 Console 与 WinFrom 项目当中进行使用,所以关于启动流程可以分为两种,一种是 Asp.Net Core 项目的启动流程, ...