本文目录一览：
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文件并自动解压，然后里面的说不定是什么的东西就为所欲为了，哇，世界末日的感觉啊……
对了，其实这波操作就是早期网络木马所采用的，现在各大浏览器早就已经把这漏洞补上了。
