很多表格业务需要将表格数据导出为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>: <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>
时间： 2024-10-19 19:11:17