zip.js是什么
zip.js的github項(xiàng)目地址：http://gildas-lormeau.github.io/zip.js/
通過(guò)zip.js封裝一個(gè)能在網(wǎng)頁(yè)端生成zip文件的插件， 直接在網(wǎng)頁(yè)中創(chuàng)建包含文件夾和文件的壓縮包，也可以自定義名字并下載；
如何使用：
1：引用zip.js
2：引用jQuery;
3：并引用封裝的ZipArchive.js ,(因?yàn)閦ip.js的api使用起來(lái)比較繁瑣,所以自己封裝實(shí)現(xiàn)了這個(gè)插件)
4：引用mime-types.js;
查看DEMO, 使用方式為：
運(yùn)行下面代碼
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="http://gildas-lormeau.github.io/zip.js/demos/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://files.cnblogs.com/files/diligenceday/ZipArchive.js"></script></head><body><script> var z = new ZipArchive; z.addFile("a/a.txt", "aaaaaaacontent"); z.addFile("aaaa.txt", "aaaaaaaccccc"); z.export("nono");</script></body></html>DEMO在后面：文件下載下來(lái)， 文件夾的格式如下：
回到頂部
創(chuàng)建壓縮文件和文件夾的詳細(xì)源代碼：
運(yùn)行下面代碼
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="http://gildas-lormeau.github.io/zip.js/demos/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> <style> code{ display: block; padding: 10px; background: #eee; } </style></head><body> <div> <h1> 兼容性 </h1> <div> <p> zip.js可以在所有的chrome瀏覽器和firefox瀏覽器中運(yùn)行， 可以在safari6和IE10，以及IE10以上運(yùn)行; </p> <p> 如果要在IE9和safari中運(yùn)行需要兩個(gè)設(shè)置： </p> <code> 1：zip.useWebWorkers == false </code> <code> 2：并引用這個(gè)JS:https://bitbucket.org/lindenlab/llsd/raw/7d2646cd3f9b/js/typedarray.js </code> </div> </div><script> zip.workerScriptsPath = "http://gildas-lormeau.github.io/zip.js/demos/"; /** * @desc 壓縮文件; * @event onprogress, onend, onerror; * */ var ZipArchive = function() { function noop() {}; this.name = "未命名文件"; this.zippedBlob = {}; var _this = this; this.length = 0; this.onend = noop; this.onerror = noop; this.onprogress = noop; //創(chuàng)建一個(gè)延遲對(duì)象; var def = this.defer = new $.Deferred(); zip.createWriter( new zip.BlobWriter("application/zip"), function(zipWriter) { _this.zipWriter = zipWriter; //繼續(xù)執(zhí)行隊(duì)列; def.resolve(); }, this.error ); }; ZipArchive.blob = function (filename, content) { return new Blob([ content ], { type : zip.getMimeType(filename) }); }; $.extend( ZipArchive.prototype, { /** * @desc 添加文件 * @param String filename為文件的名字; * @param String content; * @param Object options 傳參 * 例如：{ level : 0} 壓縮的等級(jí)，0 到 9； * 例如：{ comment : "提示文字" } * 例如：{ lastModDate : "最后編輯時(shí)間" } * */ "addFile" : function ( filename , content, options) { var _this = this; blob = ZipArchive.blob(filename, content); //為了產(chǎn)生鏈?zhǔn)降男Ч?必須把deferrer賦值給新的defer this.defer = this.defer.then(function() { var def = $.Deferred(); _this.zipWriter.add(filename, new zip.BlobReader(blob) ,function() { // reader console.log("addFile success!!"); def.resolve(); //zipWriter.close(callback); }, function (size, total) { //onend _this.onend(filename, blob, total); _this.length += total; }, function () { //onprogress _this.onprogress(filename, blob, total); },options || { //options }); return def; }); }, /** * @desc 添加文件夾, 我發(fā)現(xiàn)這個(gè)文件無(wú)法創(chuàng)建; * @desc 創(chuàng)建文件夾功能不好用, 需要?jiǎng)?chuàng)建文件夾你通過(guò) zipWriter.addFile("directory/filename.txt", blob())創(chuàng)建文件夾和對(duì)應(yīng)文件;; * */ "_addFolder" : function (foldername , options) { //創(chuàng)建文件夾功能目前不能用; //創(chuàng)建文件夾功能不好用, 直接通過(guò) zipWriter.addFile("directory/filename.txt", blob())創(chuàng)建文件夾和文件 return this; }, "size" : function () { return this.length; }, /** * @desc 獲取blob文件 * */ "get" : function () { return this.zippedBlob; }, /** * @desc 導(dǎo)出為zip文件 * */ "export" : function ( name ) { name = name || this.name; var _this = this; this.defer.then(function() { _this.zipWriter.close(function( zippedBlob ) { if( typeof name === "string" || typeof name === "number") { var downloadButton = document.createElement("a"), URL = window.webkitURL || window.mozURL || window.URL; downloadButton.href = URL.createObjectURL( zippedBlob ); downloadButton.download = name + ".zip"; downloadButton.click(); }else{ name( zippedBlob ); }; }); }); }, "error" : function() { this.onerror( this ); throw new Error("壓縮文件創(chuàng)建失敗"); } });</script><script> var z = new ZipArchive; z.addFile("a/a.txt", "aaaaaaacontent"); z.addFile("aaaa.txt", "aaaaaaaccccc"); z.export("nono");</script></body></html>新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
