浏览器端JS导出EXCEL

最新推荐文章于 2024-05-28 18:05:27 发布

荒神

最新推荐文章于 2024-05-28 18:05:27 发布

阅读量600

点赞数

很多表格业务需要将表格数据导出为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>