js解壓zip文件,js zip解壓

本文目錄一覽：

• 1、js怎麼讀取zip文件內容
• 2、jszip.js遠程讀取一個zip文件
• 3、node.js壓縮/解壓縮文件
• 4、純js遠程下載zip,實現自動解壓到js所在的當前目錄？

js怎麼讀取zip文件內容

web前端解壓zip文件有什麼用：

只考慮標準瀏覽器的話， 服務器只要傳輸壓縮包到客戶端， 節約了帶寬， 而且節約了傳輸時間， 聽起來好像很厲害的說；

如果前端的代碼很多， 而且包含大副的圖片，那麼就可以把js和css和jpg和png等各種數據通過服務端打包成zip傳送到瀏覽器， 瀏覽器負責解壓， css實用動態生成插入到dom中，js也用globalEval直接執行， jpg或者png各種圖片文件由blob流轉化為image， 直接插入到瀏覽器中；

html5支持讀取Blob(二進制大對象, file文件也是繼承了Blob)， 並轉化為圖片流或者文字流或者其他流格式， 這也是為什麼瀏覽器可以讀取”application/zip”文件的原因；

要在瀏覽器中解壓zip文件的話需要引入四個js ， 因為UnZipArchive.js依賴了zip.js, mime-type.js和jquery.js , 測試demo如下：

!DOCTYPE htmlhtmlhead lang=”en” meta charset=”UTF-8″ title/title script src=””/script script src=””/script script src=””/script script src=””/script/headbodyh2 demo/h2div input type=”file” id=”file”/divul id=”dir” /ulscript $(“#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; iarr.length; i++ ) { //點擊li的話直接下載文件; str += “li onclick=download(‘”+arr[i]+”‘)”+arr[i]+”/li” }; $(“#dir”).html( str ); }); }); var download = function ( filename ) { un.download( filename ); };/script/body/html

UnzioarichiveJS 是自己封裝的， 有任何問題的話請及時反饋

解壓ZIP壓縮包的完整DEMO

!DOCTYPE htmlhtmlhead lang=”en” meta charset=”UTF-8″ title/title script src=””/script script src=””/script script src=””/script style code{ display: block; padding: 10px; background: #eee; } /style/headbodydiv h1 兼容性 /h1 div p zip.js可以在所有的chrome瀏覽器和firefox瀏覽器中運行， 可以在safari6和IE10，以及IE10以上運行; /p p 如果要在IE9和safari中運行需要兩個設置： /p code 1：zip.useWebWorkers == false /code code 2：並引用這個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; iarr.length; i++ ) { str += “li onclick=download(‘”+arr[i]+”‘)”+arr[i]+”/li” }; $(“#dir”).html( str ); }); }); var download = function ( filename ) { un.download( filename ); }; /script/divscript zip.workerScriptsPath = “”; /** * @desc 解壓縮文件的類; * @return UnZipArchive 的實例; * */ var UnZipArchive = function( blob ) { if( !blob ) { alert(“參數不正確, 需要一個Blob類型的參數”); return ; }; if( !(blob instanceof Blob) ) { alert(“參數不是Blob類型”); return ; }; function noop() {}; this.entries = {}; this.zipReader = {}; var _this = this; this.length = 0; this.onend = noop; this.onerror = noop; this.onprogress = noop; //創建一個延遲對象; var def = this.defer = new $.Deferred(); zip.createReader( new zip.BlobReader( blob ), function(zipReader) { _this.zipReader = zipReader; zipReader.getEntries(function(entries) { _this.entries = entries; //繼續執行隊列; def.resolve(); }); }, this.error.bind(_this) ); }; /** * @desc 把blob文件轉化為dataUrl; * */ UnZipArchive.readBlobAsDataURL = function (blob, callback) { var f = new FileReader(); f.onload = function(e) {callback( e.target.result );}; f.readAsDataURL(blob); }; $.extend( UnZipArchive.prototype, { /** * @desc 獲取壓縮文件的所有入口; * @return ArrayList; * */ “getEntries” : function() { var result = []; for(var i= 0, len = this.entries.length ; ilen; i++ ) { result.push( this.entries[i].filename ); } return result; }, /** * @desc 獲取文件Entry; * @return Entry * */ “getEntry” : function ( filename ) { var entrie; for(var i= 0, len = this.entries.length ; ilen; i++ ) { if( this.entries[i].filename === filename) { return this.entries[i]; }; } }, /** * @desc 下載文件 * @param filename; * @return void; * */ “download” : function ( filename , cb , runoninit) { var _this = this; this.defer = this.defer.then(function() { var def = $.Deferred(); if(!filename) return ; if(runoninit) { return runoninit(); }; var entry = _this.getEntry( filename ); if(!entry)return; entry.getData(new zip.BlobWriter(zip.getMimeType(entry.filename)), function(data) { if( !cb ) { UnZipArchive.readBlobAsDataURL(data, function( dataUrl ) { var downloadButton = document.createElement(“a”), URL = window.webkitURL || window.mozURL || window.URL; downloadButton.href = dataUrl; downloadButton.download = filename; downloadButton.click(); def.resolve( dataUrl ); _this.onend(); }); }else{ cb( data ); def.resolve( data ); } }); return def; }); }, /** * @desc 獲取對應的blob數據; * @param filename 文件名; * @param callback回調, 參數為 blob; * @desc 或者可以直接傳一個函數作為zip解壓縮完畢的回調; * */ “getData” : function ( filename, fn ) { if( typeof filename === “string”) { this.download(filename, function( blob ) { fnfn( blob ); }); }else if( typeof filename === “function”) { this.download(“test”, null, function( blob ) { filename(); }); }; }, “error” : function() { this.onerror( this ); throw new Error(“壓縮文件解壓失敗”); } }); /script/body/html

jszip.js遠程讀取一個zip文件

項目用到了jszip.js插件,用於在後台獲取zip文件,前端解壓並將模型進行在線顯示.

官網

jszip的API說明為英文,例子其實也有些模糊.

遠程加載一個文件, 使用官網的例子 :(自行觀看);

這裡作為筆記,主要是想說

promise.then(JSZip.loadAsync)

.then(function( zip ){returnzip.file(“Hello.txt”).async(“string”);

    此處可以返回一個值,返回的值就是下一個.then的實參

})

這裡的zip就是讀取到的zip的數據,主要的屬性諸如files就是zip中的文件,可以通過zip.file(filename)的形式將該文件對象進行存儲,但是這裡的文件對象其實是一個promise,當我們需要使用的時候可以通過.then 的形式使用

例如: pic.then(function(data){

            //data就是該文件的數據,得到data後可以通過使用,這裡就需要注意我們在存儲的時候可以通過使用zip.file(filename).async(數據形式)來定義數據的存儲形式,例如base64,blob,arraybuffer,其中base64是圖片的存儲格式,但是是沒有前綴的,必須加相應的前綴才可以顯示.data:image/png;base64;就可以直接賦值給image.src;

})

node.js壓縮/解壓縮文件

注: compressing支持解壓tar，gzip，tgz，zip四種壓縮格式

如果有解壓的需求可以下這個包使用看看，希望這篇文章為你提供到幫助。

2020/3/16（疫情快快好呀）

純js遠程下載zip,實現自動解壓到js所在的當前目錄？

這代碼做起來不難，唯一的、但又能讓你絕望的問題是：任何瀏覽器都不會允許這樣的js腳本代碼運行的，這屬於最嚴重的安全隱患問題，試想想，世界上的任何一個人，只要打開某個網頁，自己的電腦上就會自動被下載一個zip文件並自動解壓，然后里面的說不定是什麼的東西就為所欲為了，哇，世界末日的感覺啊……

對了，其實這波操作就是早期網絡木馬所採用的，現在各大瀏覽器早就已經把這漏洞補上了。