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 相关文章推荐
Jquery增加鼠标中间功能mousewheel的实例代码
Sep 05 Javascript
jquery.post用法示例代码
Jan 03 Javascript
7个有用的jQuery代码片段分享
May 19 Javascript
jQuery中extend()和fn.extend()方法详解
Jun 03 Javascript
JavaScript实现图片滑动切换的代码示例分享
Mar 06 Javascript
Node.js中常规的文件操作总结
Oct 13 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
Dec 22 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
Apr 10 Javascript
详解node中创建服务进程
May 09 Javascript
vue 2.0封装model组件的方法
Aug 03 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
Apr 09 Javascript
VUEX-action可以修改state吗
Nov 19 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将数据库导出成excel的方法
2010/05/07 PHP
php设计模式 Decorator(装饰模式)
2011/06/26 PHP
使用PHP导出Redis数据到另一个Redis中的代码
2014/03/12 PHP
PHP网站建设的流程与步骤分享
2015/09/25 PHP
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
javascript中不等于的代码是什么怎么写
2013/12/29 Javascript
在NodeJS中启用ECMAScript 6小结(windos以及Linux)
2014/07/15 NodeJs
javascript中var的重要性分析
2015/02/11 Javascript
浅析JS原型继承与类的继承
2016/04/07 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
2016/06/08 Javascript
iframe中使用jquery进行查找的方法【案例分析】
2016/06/17 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
2016/06/23 Javascript
javascript实现简单的on事件绑定
2016/08/23 Javascript
Vue异步组件使用详解
2017/04/08 Javascript
Angular4学习笔记之根模块与Ng模块
2017/09/09 Javascript
使用JS获取SessionStorage的值
2018/01/12 Javascript
jquery实现动态添加附件功能
2018/10/23 jQuery
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
node.js的Express服务器基本使用教程
2019/01/09 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
2021/01/06 Javascript
浅谈MySQL中的触发器
2015/05/05 Python
Python入门_浅谈for循环、while循环
2017/05/16 Python
python实现聊天小程序
2018/03/13 Python
程序员写Python时的5个坏习惯,你有几条?
2018/11/26 Python
python实现中文文本分句的例子
2019/07/15 Python
Python日期格式和字符串格式相互转换的方法
2020/02/18 Python
Python实现疫情通定时自动填写功能(附代码)
2020/05/27 Python
python爬虫要用到的库总结
2020/07/28 Python
利用python 下载bilibili视频
2020/11/13 Python
德国购买踏板车网站:Microscooter
2019/10/14 全球购物
网站编辑求职信
2013/10/17 职场文书
供电工程专业求职信
2014/08/09 职场文书
商务邀请函
2015/01/30 职场文书
幼儿园元旦主持词
2015/07/06 职场文书
mongodb清除连接和日志的正确方法分享
2021/09/15 MongoDB
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
2022/12/24 HTML / CSS