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 相关文章推荐
一段利用WSH修改和查看IP配置的代码
May 11 Javascript
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
Mar 02 Javascript
javascript从image转换为base64位编码的String
Jul 29 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
Jan 18 Javascript
jQuery实现html表格动态添加新行的方法
May 28 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
Jan 27 Javascript
Js获取图片原始宽高的实现代码
May 17 Javascript
jQuery判断是否存在滚动条的简单方法
Sep 17 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
Oct 15 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
Jul 11 Javascript
第一个Vue插件从封装到发布
Nov 22 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
Nov 20 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
十大“创意”战术!
2020/03/04 星际争霸
php email邮箱正则
2008/10/08 PHP
JS与PHP向函数传递可变参数的区别实例代码
2011/05/18 PHP
关于使用coreseek并为其做分页的介绍
2013/06/21 PHP
PHP分页详细讲解(有实例)
2013/10/30 PHP
destoon复制新模块的方法
2014/06/21 PHP
Zend Framework开发入门经典教程
2016/03/23 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
Jquery创建一个层当鼠标移动到层上面不消失效果
2013/12/12 Javascript
Javascript实现获取及设置光标位置的方法
2015/07/21 Javascript
10个很棒的jQuery代码片段
2015/09/24 Javascript
Jquery ajax基础教程
2015/11/20 Javascript
Vue2递归组件实现树形菜单
2017/04/10 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
使用vue开发移动端管理后台的注意事项
2019/03/07 Javascript
深入Node TCP模块的理解
2019/03/13 Javascript
Django自定义manage命令实例代码
2018/02/11 Python
pandas多级分组实现排序的方法
2018/04/20 Python
pip install urllib2不能安装的解决方法
2018/06/12 Python
完美解决python中ndarray 默认用科学计数法显示的问题
2018/07/14 Python
Pandas删除数据的几种情况(小结)
2019/06/21 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
python求一个字符串的所有排列的实现方法
2020/02/04 Python
使用keras根据层名称来初始化网络
2020/05/21 Python
解决Keras 中加入lambda层无法正常载入模型问题
2020/06/16 Python
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
奥地利体育网上商店:Gigasport
2019/10/09 全球购物
Unix里面如何在后台运行程序
2016/10/14 面试题
交通安全标语
2014/06/06 职场文书
大专学生求职信
2014/07/04 职场文书
邓小平理论心得体会
2014/09/09 职场文书
2014年平安创建工作总结
2014/11/24 职场文书
Python OpenCV 彩色与灰度图像的转换实现
2021/06/05 Python