使用zip.js壓縮文件和解壓文件
阿新 • • 發佈：2019-01-26
基本 信息 img arr jquer .org 例子 ++ eas
zip.js官方網站為:https://stuk.github.io/jszip/
在此說明，下面的例子基本上來自官方示例，大家可以做參考，官方示例地址為:https://stuk.github.io/jszip/documentation/examples.html
官方例子支持在線演示效果。
研究的目的是:如何獲取zip包中的信息並讀取傳輸(其實使用JAVA或者node.js更容易實現，之所以使用js也是因為業務的特殊性)。
準備庫:
jszip.js可以去該地址下載:https://github.com/Stuk/jszip
下載成功解壓是這樣的，如圖所示:
<script src="jszip.js"></script>和<script src="FileSaver.js"></script>分別在dist和vendor目錄下
jszip-utils.js可以去該地址下載:https://github.com/Stuk/jszip-utils
jszip-utils.js 在dist目錄下
一、使用zip.js壓縮生成zip包
源碼如下:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="jszip.js"></script> <script src="jszip-utils.js"></script> <script src="FileSaver.js"></script> </head> <body> <input type="button" value="生成zip" onclick="test()"/> <script> function test(){ var zip = new JSZip(); zip.file("1.in", "1 1"); zip.file("1.out","2"); zip.generateAsync({type:"blob"}) .then(function(content) { // see FileSaver.js saveAs(content, "example.zip"); }); } </script> </body> </html>
二、讀取zip包內容並輸出文件目錄
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="http://sqqihao.github.io/codes/zipjs/zip.js"></script> <script src="http://gildas-lormeau.github.io/zip.js/demos/mime-types.js"></script> <script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script> <script src="http://sqqihao.github.io/codes/zipjs/UnZipArchive.js"></script> <style> code{ display: block; padding: 10px; background: #eee; } </style> </head> <body> <div> <h1> 兼容性 </h1> <div> <p> zip.js可以在所有的chrome瀏覽器和firefox瀏覽器中運行， 可以在safari6和IE10，以及IE10以上運行; </p> <p> 如果要在IE9和safari中運行需添加， 具體可以參考官網的說明： </p> <code> 1：並引用這個JS: https://bitbucket.org/lindenlab/llsd/raw/7d2646cd3f9b/js/typedarray.js </code> </div> <h2> demo </h2> <div> <input type="file" id="file"> </div> <ul id="dir"> </ul> <script> $("#file").change(function (e) { var file = this.files[0]; window.un = new UnZipArchive( file ); un.getData( function() { var arr = un.getEntries(); var str = ""; for(var i=0; i<arr.length; i++ ) { str += "<li onclick=download(‘"+arr[i]+"‘)>"+arr[i]+"</li>" }; $("#dir").html( str ); }); }); var download = function ( filename ) { un.download( filename ); }; </script> </div> </body> </html>
效果如圖所示:
註意事項:
不知道由於是什麽原因，如果單獨將其寫入某個html運行起來就會出現這樣的情況，如圖所示:
如果是通過git clone https://github.com/sqqihao/sqqihao.github.io
運行zip.html就會出現前面的正常解壓並讀取目錄的結果。
另外請註意最好是通過火狐瀏覽器運行這段代碼，否則可能出現這種情況，如圖所示:
這篇文章主要建立在官方文檔和這個github項目的基礎上，希望能夠對小夥伴們有所幫助。
使用zip.js壓縮文件和解壓文件