zip.js官方网站为:https://stuk.github.io/jszip/

在此说明，下面的例子基本上来自官方示例，大家可以做参考，官方示例地址为:https://stuk.github.io/jszip/documentation/examples.html

官方例子支持在线演示效果。

研究的目的是:如何获取zip包中的信息并读取传输(其实使用JAVA或者node.js更容易实现，之所以使用js也是因为业务的特殊性)。

准备库:

jszip.js可以去该地址下载:https://github.com/Stuk/jszip

下载成功解压是这样的，如图所示:

 <script src="jszip.js"></script>和<script src="FileSaver.js"></script>分别在dist和vendor目录下

jszip-utils.js可以去该地址下载:https://github.com/Stuk/jszip-utils

jszip-utils.js 在dist目录下

一、使用zip.js压缩生成zip包

源码如下:

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script src="jszip.js"></script>

    <script src="jszip-utils.js"></script>

    <script src="FileSaver.js"></script>

</head>

<body>

<input type="button" value="生成zip" onclick="test()"/>

<script>

function test(){

var zip = new JSZip();

zip.file("1.in", "1 1");

zip.file("1.out","");

zip.generateAsync({type:"blob"})

.then(function(content) {

    // see FileSaver.js

    saveAs(content, "example.zip");

});

}

</script>

</body>

</html>

二、读取zip包内容并输出文件目录

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script src="http://sqqihao.github.io/codes/zipjs/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://sqqihao.github.io/codes/zipjs/UnZipArchive.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：并引用这个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>

</body>

</html>

效果如图所示:

注意事项:

不知道由于是什么原因，如果单独将其写入某个html运行起来就会出现这样的情况，如图所示:

如果是通过git clone https://github.com/sqqihao/sqqihao.github.io

运行zip.html就会出现前面的正常解压并读取目录的结果。

另外请注意最好是通过火狐浏览器运行这段代码，否则可能出现这种情况，如图所示:

这篇文章主要建立在官方文档和这个github项目的基础上，希望能够对小伙伴们有所帮助。

使用zip.js压缩文件和解压文件的更多相关文章

  1. Linux 压缩文件 和解压文件

    .zip 解压:unzip FileName.zip 压缩:zip FileName.zip DirName .rar 解压:rar -x FileName.zip 压缩:rar -a FileNam ...

  2. C#压缩和解压文件

    这里用两种方法实现C#压缩和解压文件 1.使用System.IO.Compression名称空间下的相关类(需引用 System.IO.Compression.FileSystem和System.IO ...

  3. 【转】Java压缩和解压文件工具类ZipUtil

    特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...

  4. Linux命令（16）压缩，解压文件

    tar: 简介:tar命令只是把目录打包成一个归档(文件),并不负责压缩.在tar命令中可以带参数调用gzip或bzip2压缩.因为gzip和bzip2只能压缩单个文件. 在linux下是不需要后缀名 ...

  5. Java操作zip-压缩和解压文件

    一.说明 rar格式的压缩包收费,java支持zip格式的压缩和解压 二.工具类 import java.io.*; import java.util.Enumeration; import java ...

  6. AIX系统上压缩与解压文件

    压缩. 命令格式: #tar -cvf (或xvf)+文件名+设备 C:是本地到其他设备 x:是其他设备到本地 r:是追加,比如打包时,将其他文件追加进来使用该参数. t:显示tar包里的内容,但还原 ...

  7. Linux学习笔记之AIX系统上压缩与解压文件

    0x00 概述 AIX机器真难用,一时半会还真适应不了.   0x01 压缩tar 命令格式: # tar -cvf (或xvf)+文件名+设备 C:是本地到其他设备 x:是其他设备到本地 r:是追加 ...

  8. C# 压缩、解压文件夹或文件(带密码)

    今天梳理一下项目中用到的压缩.解压文件夹或文件的方法,发现因为需求不同,已经用了好几个不同组件.今天就好好整理记录下,别下次遇到需求又重头开始了. DotNetZip DotNetZip是一个开源的免 ...

  9. Linux下打包压缩war和解压war包

    Linux下打包压缩war和解压war包 unzip是一种方法,如果不行则采用下面的方法 把当前目录下的所有文件打包成game.war jar -cvfM0 game.war ./ -c   创建wa ...

随机推荐

  1. 如何将一个HTML页面嵌套在另一个页面中

    一 在原页面嵌入其他页面 1.使用iframe框架 客户端页面嵌套可以使用iframe的方法,弊端是必须事先想好被嵌套的页面在首页中要占多大的位置. 如果被嵌套页面太大,超过事先定义的宽度或高度,则首 ...

  2. [PHP] 算法-找出两个链表的第一个公共结点的PHP实现

    输入两个链表,找出它们的第一个公共结点 1.两个单链表,有公共结点,那么必然,尾部公用 2.找出链表1的长度,找出链表2的长度,长的链表减去短的链表得出一个n值 3.长的链表先走n步,两个链表再同时移 ...

  3. Java中 接口是如何实现多态的特性的

    Java中多态是个很难理解的概念,但同时又是非常重要的概念,Java三大特性(封装.继承.多态)之一,我们从字面上理解,就是一种类型的多种状态,一下通过卖小汽车的例子再次说明什么是多态,其中利用到了接 ...

  4. Python 简单的文件上传功能

    简单地在程序当前目录下上传一张图片: 1.png 到程序的 yuan 文件夹下.这里使用的是固定参数 post,如果后期有需求,可以增加判断来更加完善程序. # server 端 import soc ...

  5. python中的清屏函数

    一:cmd中python的清屏函数 import os os.system("cls") cmd中演示 1.在cmd中输入命令行: 2.执行后: 3.为什么会遗留一个0? 因为函数 ...

  6. webpack打包时排除其中一个css、js文件，或单独打包一个css、js文件

    在项目中经常会需要将一些接口的配合文件或者某些样式文件,分离出来单独打包,便于后期改动,这里我以css文件为例,介绍实现两种方法: 项目目录: 如上图所示,现在我需要将项目中的scBtn.css文件单 ...

  7. iOS-WKWebView的使用

    参考文章:http://www.cocoachina.com/ios/20180831/24753.html WK时苹果在iOS8.0之后推出的控件,相比于UIWebView: 内存消耗少: 解决了网 ...

  8. android.support不统一的问题

    今天supprt28遇到的问题,由于28还是预览版,还存在一些bug 都是因为如果程序内出现不同的,support或者其他外部引用库的多个版本,Gradle在进行合并的时候会使用本地持有的,最高版本的 ...

  9. Kotlin入门(3)基本变量类型的用法

    上一篇文章介绍了Kotlin在App开发中的简单用法,包括操纵控件对象.设置控件监听器,以及弹出Toast提示等等.也许大家已经迫不及待想要了解更深入的App开发,可是由于Kotlin是一门全新的语言 ...

  10. Kotlin入门(5)字符串及其格式化

    上一篇文章介绍了数组的声明和操作,包括字符串数组的用法.注意到Kotlin的字符串类也叫String,那么String在Java和Kotlin中的用法有哪些差异呢?这便是本文所要阐述的内容了. 首先要 ...