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 相关文章推荐
JavaScript Date对象 日期获取函数
Dec 19 Javascript
JS打开图片另存为对话框实现代码
Dec 26 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
Apr 19 Javascript
js创建表单元素并使用submit进行提交
Aug 14 Javascript
关于function类中定义变量this的简单说明
May 28 Javascript
移动适配的几种方案(三种方案)
Nov 25 Javascript
Vue.js实战之Vuex的入门教程
Apr 01 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
Apr 28 Javascript
详解vue.js移动端导航navigationbar的封装
Jul 05 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
Node.js中Bootstrap-table的两种分页的实现方法
Sep 18 Javascript
VUEX 数据持久化,刷新后重新获取的例子
Nov 12 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
基于PHP的简单采集数据入库程序【续篇】
2014/07/30 PHP
php自定义时间转换函数示例
2016/12/07 PHP
php设计模式之适配器模式原理、用法及注意事项详解
2019/09/24 PHP
基于jquery的放大镜效果
2012/05/30 Javascript
JS随即打乱数组实现代码
2012/12/03 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
2015/08/27 Javascript
通用javascript代码判断版本号是否在版本范围之间
2015/11/29 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
2017/06/13 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
2017/08/04 jQuery
JS改变页面颜色源码分享
2018/02/24 Javascript
jQuery实现获取选中复选框的值实例详解
2018/06/28 jQuery
vue axios 简单封装以及思考
2018/10/09 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
2019/09/24 Javascript
[01:05:56]2018DOTA2亚洲邀请赛3月29日 小组赛A组 Newbee VS VG
2018/03/30 DOTA
[01:14]TI珍贵瞬间系列(六):冠军
2020/08/30 DOTA
Python 多线程抓取图片效率对比
2016/02/27 Python
python使用Flask操作mysql实现登录功能
2018/05/14 Python
Python实现的读取文件内容并写入其他文件操作示例
2019/04/09 Python
Django模板标签中url使用详解(url跳转到指定页面)
2020/03/19 Python
python百行代码自制电脑端网速悬浮窗的实现
2020/05/12 Python
pycharm全局搜索的具体步骤
2020/07/28 Python
一款CSS3实现多功能下拉菜单(带分享按)的教程
2014/11/05 HTML / CSS
Chain Reaction Cycles芬兰:世界上最大的在线自行车商店
2017/12/06 全球购物
Shopee印度尼西亚:东南亚与台湾市场最大电商平台
2018/06/17 全球购物
西班牙电子产品购物网站:Electronicamente
2018/07/26 全球购物
教师教学评估方案
2014/05/09 职场文书
运动会口号8字
2014/06/07 职场文书
实习生矿工检讨书
2014/10/13 职场文书
杭州西湖英语导游词
2015/02/03 职场文书
2015年大学迎新晚会总结
2015/07/16 职场文书
2016大学生党校学习心得体会
2016/01/06 职场文书
redis 限制内存使用大小的实现
2021/05/08 Redis
Canvas绘制像素风图片的示例代码
2021/09/25 HTML / CSS
基于angular实现树形二级表格
2021/10/16 Javascript
CSS 鼠标点击拖拽效果的实现代码
2022/12/24 HTML / CSS