javascript实现网页端解压并查看zip文件

2019-11-20 11:01:07

字体：大中小

来源：转载

供稿：网友

WEB前端解压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 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/UnZipArchive.js"></script></head><body><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++ ) {    //点击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 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浏览器中运行， 可以在safari6和IE10，以及IE10以上运行;  </p>  <p>   如果要在IE9和safari中运行需要两个设置：  </p>  <code>   1：zip.useWebWorkers == false  </code>  <code>   2：并引用这个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><script> zip.workerScriptsPath = "http://gildas-lormeau.github.io/zip.js/demos/"; /**  * @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 ; i<len; 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 ; i<len; 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 ) {     fn&&fn( blob );    });   }else if( typeof filename === "function") {    this.download("test", null, function( blob ) {     filename();    });   };  },  "error" : function() {   this.onerror( this );   throw new Error("压缩文件解压失败");  } });</script></body></html>

　　但是浏览器兼容又是大问题；

上一篇：js编写“贪吃蛇”的小游戏

下一篇：探究JavaScript函数式编程的乐趣