浏览器端JS导出EXCEL

原创
2014/09/22 13:54
阅读数 1.8W

很多表格业务需要将表格数据导出为Excel,通常使用后台语言java或者php实现数据查询组织Excel文件,提供下载。如果使用客户端JS导出Excel的话,可以减轻服务器端的运算压力,并且能够快速响应。
早期浏览器端导出excel都是借助IE的ActiveX,需要调整浏览器的安全级别,且只能再IE浏览器下使用。我们需要一种跨平台的解决方案。
而Flash具有强大的客户端处理能力,其FileReference类可以从浏览器向本地存储数据。随着Html5的发展,File API也支持浏览器读写本地文件。因此本文主要提供两种浏览器端JS导出EXCEL文件的解决方案:

1. JS FileSaver.js
2. Flash Downloadify

你可以先查看

Demo

通过查看源码,了解实现思路。

FileSaver.js

FileSaver.js实现浏览器写入文件到本地磁盘,对于不支持Blob的浏览器需要使用Blob.js

var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
saveAs(blob, "hello world.txt");


Downloadify

Downloadify借助Flash的FileReference实现本地读写文件。(笔者补充,Flash实现了很多Html做不到的事情,例如:多文件上传、本地存储、摄像头交互、Socket通信等等,然后却被Html5一个个模仿实现,作为一个早期的Flash开发者难免有些悲哀)

<script type="text/javascript">// <![CDATA[
Downloadify.create('downloadify',{
    filename: function(){
      return document.getElementById('filename').value;
    },
    data: function(){ 
      return document.getElementById('data').value;
    },
    onComplete: function(){ 
      alert('Your File Has Been Saved!'); 
    },
    onCancel: function(){ 
      alert('You have cancelled the saving of this file.');
    },
    onError: function(){ 
      alert('You must put something in the File Contents or there will be nothing to save!'); 
    },
    transparent: false,
    swf: 'media/downloadify.swf',
    downloadImage: 'images/download.png',
    width: 100,
    height: 30,
    transparent: true,
    append: false
  });
// ]]></script>



Demo源码

实现非常简单,不逐一解释了。

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8"/>
<title>js导出excel-ComingX</title>
</head>
<body>
<h1>js导出excel</h1>
<p>1. 借助开源组件<a href="https://github.com/eligrey/FileSaver.js" target="blank">FileSaver.js</a>和<a href="https://github.com/eligrey/Blob.js" target="blank">Blob.js</a>,(支持:ie10+, Firefox20+, Chrome, Safari6+, Opera15+)</p>
<p>2. 借助Flash开源组件<a href="https://github.com/eligrey/FileSaver.js" target="blank">Downloadify<a>,(支持:所有浏览器)
<p><strong>数据内容:</strong></p>
<textarea rows="6" id="content">
姓名,学号,成绩
王三,103020120,98
张四,103020218,80
</textarea>
<p>
<strong>文件名</strong>:&nbsp;<input type="text" name="filename" id="filename" value="hello.csv" />&nbsp;(.csv后缀)
</p>
<p style="color: #3300ff;"">1. 使用FileSaver.js保存</p><button id="saveBtn">保存Excel文件</button>
 
<p style="color: #3300ff;">2. 使用Downloadify保存</p>
<p id="downloadify">
<object id="downloadify_obj" width="100" height="30" type="application/x-shockwave-flash" name="downloadify_obj" data="./downloadify.swf">
<param name="allowScriptAccess" value="always">
<param name="wmode" value="transparent">
<param name="flashvars" value="queue_name=downloadify&width=100&height=30&downloadImage=images/download.png">
</object>
</p>
<p>Tutorial From <a href="http://www.comingx.com">ComingX</a></p>
<p><script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_3077979'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s5.cnzz.com/stat.php%3Fid%3D3077979' type='text/javascript'%3E%3C/script%3E"));</script></p>
<!--filesaver-->
<script async="" src="./Blob.js"></script>
<script async="" src="./FileSaver.js"></script>
<script>
(function(){
	document.getElementById("saveBtn").onclick = function(event){
		event.preventDefault();
		var BB = self.Blob;
		saveAs(
			  new BB(
				  ["\ufeff" + document.getElementById("content").value] //\ufeff防止utf8 bom防止中文乱码
				, {type: "text/plain;charset=utf8"}
			)
			, document.getElementById("filename").value
		);
	};
})();
</script>
<!--downloadify-->
<script src="./swfobject.js"></script>
<script src="./downloadify.min.js"></script>
<script>
(function(){
Downloadify.create('downloadify',{
    filename: function(){
      return document.getElementById('filename').value;
    },
    data: function(){ 
      return "\ufeff" + document.getElementById('content').value;
    },
    onComplete: function(){ 
      alert('Downloadify保存成功!'); 
    },
    onCancel: function(){ 
    },
    onError: function(){ 
      alert('Downloadify保存失败!'); 
    },
    transparent: false,
    swf: './downloadify.swf',
    downloadImage: 'images/download.png',
    width: 100,
    height: 30,
    transparent: true,
    append: false
  });
})();
</script>
</body>
</html>



展开阅读全文
打赏
3
28 收藏
分享
加载中
分享一个功能丰富、兼容性好、高性能的专业 Excel 文档基础库 #Excelize#https://github.com/xuri/excelize
04/13 10:30
回复
举报
mark一下,这个也是类似SpreadJS调用Excel IO实现的Excel导入导出吗?
2016/09/12 18:10
回复
举报
Downloadify IE不行。。导出都在一个格子里。。
2015/12/02 15:17
回复
举报
该评论暂时无法显示,详情咨询 QQ 群:912889742
53
2015/09/09 10:32
回复
举报
2
2015/08/06 10:57
回复
举报
2
2015/08/06 10:57
回复
举报
更多评论
打赏
7 评论
28 收藏
3
分享
返回顶部
顶部