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

2024-10-02 20:39:37

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>

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

nodejs的压缩文件模块archiver用法示例

本文实例讲述了nodejs的压缩文件模块archiver用法.分享给大家供大家参考,具体如下: 发现了个更好用的 zip-local https://www.npmjs.com/package/zip-local var zipper = require("zip-local"); zipper.sync.zip("/Users/xxx/xx/xx").compress().save("/Users/xxx/xx/xx.zip"); 如下代码实现
基于pako.js实现gzip的压缩和解压功能示例

本文实例讲述了基于pako.js实现gzip的压缩和解压功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>pako.js实现gzip的压缩和解压</title> </head> <body> <script type="text
一个高效的JavaScript压缩工具下载集合

与其他压缩工具压缩率比较: 1. JavaScript Compressor(http://dean.edwards.name/packer/) 与他自己的压缩工具代码为例(v2.02) packer压缩后大小为 7,428 字节(去除注释). 而我们的压缩工具可以压缩至7,256 字节 7256 / 7428 = 0.9768443726440496 2.Dojo ShrinkSafe (粗糙的东西,既低效又危险,建议原有用户赶紧换掉) 与他自己
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解

zip.js是什么 zip.js的github项目地址:http://gildas-lormeau.github.io/zip.js/ 通过zip.js封装一个能在网页端生成zip文件的插件, 直接在网页中创建包含文件夹和文件的压缩包,也可以自定义名字并下载: 如何使用: 1:引用zip.js 2:引用jQuery; 3:并引用封装的ZipArchive.js ,(因为zip.js的api使用起来比较繁琐,所以自己封装实现了这个插件) 4:引用mime-types.js; 查看DEMO, 使用方
JavaScript 在线压缩和格式化收藏

以前在找到过压缩 Javascript 代码的程序,一直在用,感觉效果不错.http://javascriptcompressor.com/在线压缩 Javascript 源码只是把空格.换行.多余的注释等等清理掉,尤其选中 Shrink variables 时,会把长的变量名缩减成单个字母的变量名,压缩比通常能达到50%甚至更小.现在 AJAX 大行其道,JavaScript 文件越来越大,用此压缩应该能减轻不少流量负担.而且缩减变量名后,程序并没有加密,但会使程序变得很难看懂,一定程度上也能
Node.js站点使用Nginx作反向代理时配置GZip压缩的教程

node.js 开发的站点,如果你也是用了nginx实现反向代理. 那么在服务端可以轻松实现 gzip 压缩,让站点浏览更顺畅. 前提条件: node.js + nginx 反向代理. node.js 需要做的工作: express 4.0以下版本: app.use(express.compress()); //主要是这句 app.use(express.json()); app.use(express.urlencoded()); app.use(express.bodyParser());
JS图片压缩（pc端和移动端都适用）

最近在做移动端遇到了一个问题就是:手机拍照后,图片过大如果上传到服务器务必会浪费带宽,最重要的是流量啊别慌,好事儿来了,务必就会有人去研究研究图片的压缩: 鄙人结合前人的经验,结合自己实战,总结出一个方法供大家参考: /** * 图片压缩,默认同比例压缩 * @param {Object} path * pc端传入的路径可以为相对路径,但是在移动端上必须传入的路径是照相图片储存的绝对路径 * @param {Object} obj * obj 对象有 width, height, qualit
IIS7下js文件启用Gzip后却不压缩的解决方法

IIS7已经启用静态文件压缩(Gzip)但是死活不压缩,查找后发现是II7下MIME类型设置问题将.js的MIME类型设置为application/javascript 再查看页面,已经启用了Gzip. 不过,几个天后又发现有的js文件被压缩,有的却没有查找原因发现是引用js文件是没有设置type <script></script> <script src="A.js"></script> 加上type="text/java
关于JavaScript的gzip静态压缩方法

一个页面减少10KB对于一个小网站来说,算不上什么,但对于大型站点来说,累计起来却是一个很大的流量......gzip压缩是一个有效可行的方法,但需要Apache的支持(Apache与IIS共用一个端口解决方法). 传统的JS压缩(删除注释,删除多余空格等)提供的压缩率有时还是不尽不意,幸亏现在的浏览器都支持压缩传输(通过设置http header的Content-Encoding=gzip),可以通过服务器的配置(如apache)为你的js提供压缩传输,或是appfuse中使用的GZipFil
js压缩工具 yuicompressor 使用教程

我们提供的js,css压缩工具 yuicompressor 2.46打包简介官方网址:http://developer.yahoo.com/yui/compressor/ JS与css 压缩工具 yuicompressor当前最新版本:2.4.2 运行需要先安装JDK,官方下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk-7u1-download-513651.html 根据自己的系统选择合适的版本,一般情况下58

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

相关推荐

随机推荐