很多表格业务需要将表格数据导出为Excel,通常使用后台语言java或者php实现数据查询组织Excel文件,提供下载。如果使用客户端JS导出Excel的话,可以减轻服务器端的运算压力,并且能够快速响应。
早期浏览器端导出excel都是借助IE的ActiveX,需要调整浏览器的安全级别,且只能再IE浏览器下使用。我们需要一种跨平台的解决方案。
而Flash具有强大的客户端处理能力,其FileReference类可以从浏览器向本地存储数据。随着Html5的发展,File API也支持浏览器读写本地文件。因此本文主要提供两种浏览器端JS导出EXCEL文件的解决方案:
1. JS FileSaver.js
2. Flash Downloadify
你可以先查看
通过查看源码,了解实现思路。
FileSaver.js实现浏览器写入文件到本地磁盘,对于不支持Blob的浏览器需要使用Blob.js。
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"}); saveAs(blob, "hello world.txt");
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>
实现非常简单,不逐一解释了。
<!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>: <input type="text" name="filename" id="filename" value="hello.csv" /> (.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>
原文:http://my.oschina.net/tongjh/blog/316938