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. [日常] C语言中指针变量

    CPU 访问内存时需要的是地址,而不是变量名和函数名!变量名和函数名只是地址的一种助记符,当源文件被编译和链接成可执行程序后,它们都会被替换成地址.编译和链接过程的一项重要任务就是找到这些名称所对应的 ...

  2. canvas学习和滤镜实现

    最近学习了 HTML5 中的重头戏--canvas.利用 canvas,前端人员可以很轻松地.进行图像处理.其 API 繁多,这次主要学习常用的 API,并且完成以下两个代码: 实现去色滤镜 实现负色 ...

  3. Nhibernate学习的第二天

    Fluent-Nhibernate   网站:http://www.fluentnhibernate.org/ 使用NuGet下载Fluent-Nhibernate. 1.创建实体类 2.创建实体类映 ...

  4. inheritCombination.js

    // 组合继承 // 其基本思路是使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承 function Person(name){ this.name = name; th ...

  5. vue项目未加载完成前显示loading...

    1.在Index.html里面加入loading的元素,让loading元素显示,让app元素隐藏 <!DOCTYPE html> <html> <head> &l ...

  6. CSS图片两端对齐,自适应列表布局末行对齐修复实例页面

    写在前面 前端开发,图片两端对齐,是十分常见的,也是十分痛苦的,我试过好多方法,通过整理,认为下面还是比较靠谱的,在实践中大家可以试试,欢迎一起学习,一起进步 HTML代码 HTML代码非常简单,用的 ...

  7. C语言字符串读入函数笔记

    gets(str)函数和scanf("%s",str)区别: 转自:https://zhidao.baidu.com/question/290403568.html 二者都是从终端 ...

  8. 深入研究HTML5实现图片压缩上传

    上篇文章中提到移动端上传图片,我们知道现在流量还是挺贵的,手机的像素是越来越高,拍个照动不动就是好几M,伤不起.虽然客户端可以轻轻松松实现图片压缩再上传,但是我们的应用还可能在浏览器里面打开,怎么办呢 ...

  9. mysql 之库, 表的简易操作

    一. 库的操作 1.创建数据库 创建数据库: create database 库名 charset utf8;   charset uft8  可选项 1.2 数据库命名规范: 可以由字母.数字.下划 ...

  10. 机器学习是万能的吗?AI落地有哪些先决条件?

    机器学习是万能的吗?AI落地有哪些先决条件? https://mp.weixin.qq.com/s/9rNY2YA3BMpoY8NQ_rVIjQ 1.引言 入门机器学习或从事其相关工作前,不知道你思考 ...