javascript實(shí)現(xiàn)網(wǎng)頁(yè)端解壓并查看zip文件

更新時(shí)間：2015年12月15日 08:52:29 作者：方方和圓圓

昨天給大家分享了在網(wǎng)頁(yè)端使用zip.js插件實(shí)現(xiàn)在線壓縮文件的代碼，今天給大家分享一下javascript實(shí)現(xiàn)網(wǎng)頁(yè)端解壓并查看zip文件的方法，非常的實(shí)用，有需要的小伙伴可以參考下

WEB前端解壓ZIP壓縮包

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

　　　　只考慮標(biāo)準(zhǔn)瀏覽器的話，服務(wù)器只要傳輸壓縮包到客戶端，節(jié)約了帶寬，而且節(jié)約了傳輸時(shí)間，聽起來(lái)好像很厲害的說(shuō)；

　　如果前端的代碼很多，而且包含大副的圖片，那么就可以把js和css和jpg和png等各種數(shù)據(jù)通過(guò)服務(wù)端打包成zip傳送到瀏覽器，瀏覽器負(fù)責(zé)解壓， css實(shí)用動(dòng)態(tài)生成插入到dom中，js也用globalEval直接執(zhí)行， jpg或者png各種圖片文件由blob流轉(zhuǎn)化為image，直接插入到瀏覽器中；

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

　　要在瀏覽器中解壓zip文件的話需要引入四個(gè)js ，因?yàn)閁nZipArchive.js依賴了zip.js, mime-type.js和jquery.js , 測(cè)試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++ ) {
    //點(diǎn)擊li的話直接下載文件;
    str += "<li onclick=download('"+arr[i]+"')>"+arr[i]+"</li>"
   };
   $("#dir").html( str );
  });
 });
 var download = function ( filename ) {
  un.download( filename );
 };
</script>
</body>
</html>

UnzioarichiveJS 是自己封裝的，有任何問(wèn)題的話請(qǐng)及時(shí)反饋

　　解壓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瀏覽器中運(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>

 <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 的實(shí)例;
  * */
 var UnZipArchive = function( blob ) {
  if( !blob ) {
   alert("參數(shù)不正確, 需要一個(gè)Blob類型的參數(shù)");
   return ;
  };
  if( !(blob instanceof Blob) ) {
   alert("參數(shù)不是Blob類型");
   return ;
  };

  function noop() {};
  this.entries = {};
  this.zipReader = {};
  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.createReader( new zip.BlobReader( blob ), function(zipReader) {
   _this.zipReader = zipReader;
   zipReader.getEntries(function(entries) {
    _this.entries = entries;
    //繼續(xù)執(zhí)行隊(duì)列;
    def.resolve();
   });
  }, this.error.bind(_this) );
 };

 /**
  * @desc 把blob文件轉(zhuǎn)化為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 獲取對(duì)應(yīng)的blob數(shù)據(jù);
   * @param filename 文件名;
   * @param callback回調(diào), 參數(shù)為 blob;
   * @desc 或者可以直接傳一個(gè)函數(shù)作為zip解壓縮完畢的回調(diào);
   * */
  "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>

　　但是瀏覽器兼容又是大問(wèn)題；

您可能感興趣的文章: