標籤：style blog http color io os 使用 java ar
很多表格業務需要將表格式資料匯出為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實現瀏覽器寫入檔案到本地磁碟，對於不支援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>
實現非常簡單，不逐一解釋了。
<!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>
瀏覽器端JS匯出EXCEL
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
