JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解


Posted in Javascript onDecember 14, 2015

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, 使用方式为:

运行下面代码

<!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/ZipArchive.js"></script>
</head>
<body>

<script>
  var z = new ZipArchive;
  z.addFile("a/a.txt", "aaaaaaacontent");
  z.addFile("aaaa.txt", "aaaaaaaccccc");
  z.export("nono");
</script>
</body>
</html>

DEMO在后面:文件下载下来, 文件夹的格式如下:

JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解

回到顶部

创建压缩文件和文件夹的详细源代码:
运行下面代码

<!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>
  </div>
<script>
  zip.workerScriptsPath = "http://gildas-lormeau.github.io/zip.js/demos/";
  /**
   * @desc 压缩文件;
   * @event onprogress, onend, onerror;
   * */
  var ZipArchive = function() {
    function noop() {};
    this.name = "未命名文件";
    this.zippedBlob = {};
    var _this = this;
    this.length = 0;
    this.onend = noop;
    this.onerror = noop;
    this.onprogress = noop;
    //创建一个延迟对象;
    var def = this.defer = new $.Deferred();
    zip.createWriter( new zip.BlobWriter("application/zip"), function(zipWriter) {
      _this.zipWriter = zipWriter;
      //继续执行队列;
      def.resolve();
    }, this.error );
  };

  ZipArchive.blob = function (filename, content) {
    return new Blob([ content ], {
      type : zip.getMimeType(filename)
    });
  };

  $.extend( ZipArchive.prototype, {
    /**
     * @desc 添加文件
     * @param String filename为文件的名字;
     * @param String content;
     * @param Object options 传参
     *   例如:{ level : 0} 压缩的等级,0 到 9;
     *   例如:{ comment : "提示文字" }
     *   例如:{ lastModDate : "最后编辑时间" }
     * */
    "addFile" : function ( filename , content, options) {
      var _this = this;
      blob = ZipArchive.blob(filename, content);
      //为了产生链式的效果, 必须把deferrer赋值给新的defer
      this.defer = this.defer.then(function() {
        var def = $.Deferred();

        _this.zipWriter.add(filename, new zip.BlobReader(blob)
            ,function() { // reader
              console.log("addFile success!!");
              def.resolve();
              //zipWriter.close(callback);
            }, function (size, total) { //onend
              _this.onend(filename, blob, total);
              _this.length += total;
            }, function () { //onprogress
              _this.onprogress(filename, blob, total);
            },options || {
              //options
            });

        return def;
      });
    },

    /**
     * @desc 添加文件夹, 我发现这个文件无法创建;
     * @desc 创建文件夹功能不好用, 需要创建文件夹你通过 zipWriter.addFile("directory/filename.txt", blob())创建文件夹和对应文件;;
     * */
    "_addFolder" : function (foldername , options) {
      //创建文件夹功能目前不能用;
      //创建文件夹功能不好用, 直接通过 zipWriter.addFile("directory/filename.txt", blob())创建文件夹和文件
      return this;
    },

    "size" : function () {
      return this.length;
    },

    /**
     * @desc 获取blob文件
     * */
    "get" : function () {
      return this.zippedBlob;
    },

    /**
     * @desc 导出为zip文件
     * */
    "export" : function ( name ) {
      name = name || this.name;
      var _this = this;
      this.defer.then(function() {
        _this.zipWriter.close(function( zippedBlob ) {
          if( typeof name === "string" || typeof name === "number") {
            var downloadButton = document.createElement("a"),
                URL = window.webkitURL || window.mozURL || window.URL;
            downloadButton.href = URL.createObjectURL( zippedBlob );
            downloadButton.download = name + ".zip";
            downloadButton.click();
          }else{
            name( zippedBlob );
          };
        });
      });
    },

    "error" : function() {
      this.onerror( this );
      throw new Error("压缩文件创建失败");
    }
  });

</script>
<script>
  var z = new ZipArchive;
  z.addFile("a/a.txt", "aaaaaaacontent");
  z.addFile("aaaa.txt", "aaaaaaaccccc");
  z.export("nono");
</script>
</body>
</html>
Javascript 相关文章推荐
Discuz! 6.1_jQuery兼容问题
Sep 23 Javascript
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
Oct 21 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
Mar 01 Javascript
深入理解jQuery中live与bind方法的区别
Dec 18 Javascript
js中文逗号转英文实现
Feb 11 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
Jul 29 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
Nov 24 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
May 27 Javascript
原生Javascript插件开发实践
Jan 09 Javascript
数组Array的排序sort方法
Feb 17 Javascript
vuex actions传递多参数的处理方法
Sep 18 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
Dec 14 #Javascript
基于JavaScript实现一定时间后去执行一个函数
Dec 14 #Javascript
javascript中new关键字详解
Dec 14 #Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
Dec 14 #Javascript
Position属性之relative用法
Dec 14 #Javascript
CSS中position属性之fixed实现div居中
Dec 14 #Javascript
通过设置CSS中的position属性来固定层的位置
Dec 14 #Javascript
You might like
三国漫画《火凤燎原》宣布动画化PV放出 预计2020年播出
2020/03/08 国漫
PHP 开源AJAX框架14种
2009/08/24 PHP
php批量删除超链接的实现方法
2015/10/19 PHP
yii的入口文件index.php中为什么会有这两句
2016/08/04 PHP
php+ajax实现带进度条的上传图片功能【附demo源码下载】
2016/09/14 PHP
PHP实现随机生成水印图片功能
2017/03/22 PHP
php实现断点续传大文件示例代码
2020/06/19 PHP
js判断FCKeditor内容是否为空的两种形式
2013/05/14 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
理解和运用JavaScript的闭包机制
2015/08/13 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
2016/05/28 Javascript
基于JS实现网页中的选项卡(两种方法)
2017/06/16 Javascript
微信小程序实现皮肤功能(夜间模式)
2017/06/18 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
2017/09/12 Javascript
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
2019/05/30 NodeJs
微信小程序使用canvas自适应屏幕画海报并保存图片功能
2019/07/25 Javascript
Python中scatter函数参数及用法详解
2017/11/08 Python
Tensorflow之Saver的用法详解
2018/04/23 Python
浅谈Python中的bs4基础
2018/10/21 Python
Python小工具之消耗系统指定大小内存的方法
2018/12/03 Python
详解用python写网络爬虫-爬取新浪微博评论
2019/05/10 Python
Python3匿名函数lambda介绍与使用示例
2019/05/18 Python
python openpyxl使用方法详解
2019/07/18 Python
Pycharm激活码激活两种快速方式(附最新激活码和插件)
2020/03/12 Python
python+appium+yaml移动端自动化测试框架实现详解
2020/11/24 Python
使用gunicorn部署django项目的问题
2020/12/30 Python
五分钟学会怎么用Pygame做一个简单的贪吃蛇
2021/01/06 Python
智利最大的网上商店:Linio智利
2016/11/24 全球购物
捐助倡议书范文
2014/04/15 职场文书
保护环境的标语
2014/06/09 职场文书
门面房租房协议书
2014/08/20 职场文书
门卫管理制度范本
2015/08/05 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书
opencv读取视频并保存图像的方法
2021/06/04 Python
Python激活Anaconda环境变量的详细步骤
2021/06/08 Python
Python之Matplotlib绘制热力图和面积图
2022/04/13 Python