JSZip 的简单介绍

智_永无止境

已于 2025-03-20 18:38:32 修改

阅读量3.4w

点赞数 14

分类专栏： JS 文章标签：压缩 JSZip

于 2019-01-11 12:18:39 首次发布

本文链接：https://blog.csdn.net/static_coder/article/details/86293076

版权

JS 专栏收录该内容

4 篇文章

订阅专栏

1、前言

前端处理一些批量文件或者图片时候，通过使用异步上传，减少表单一次性提交的的数据量。但是图片或者文件有删除的时候，服务器上真实的图片不容易删除。找了一些资料发些了JSZip这个技术，可以将文件或者图片打包成一个Zip文件。这就大大减少了数据的传输量。简单记录一下JSZip的用法

2、JSZip简介

这是一个JavaScript类库，用来操作.zip文件的工具。使用主要引入JSZip.js即可。

3、直接上Demo

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>测试JSZIP</title>
</head>
<body>
    <input type="file" id="file"/>
    <img src="" id="image">
</body>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jszip.js"></script>
<script type="text/javascript" src="js/cropper.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.js"></script>
<script type="text/javascript">
    $(function() {
        $("#file").change(function () {
            var file = this.files[0];
            var reader = new FileReader();
            reader.readAsDataURL(file);
            var base64 = "";
            reader.onload = function () {
                var imgData = this.result;
                $("#image").attr("src", imgData);

                var zip = new JSZip();
                // 向zip文件中添加图片，可以添加多个文件或者图片，此处以图片为例
                // base64图片需要去掉base64图片标识
                zip.file("car.jpg", imgData.substring(imgData.indexOf(",") + 1), {base64: true});
                zip.generateAsync({
                        type: "blob",  // 压缩类型
                        compression: "DEFLATE",      // STORE：默认不压缩 DEFLATE：需要压缩
                        compressionOptions: {
                            level: 9  // 压缩等级1~9    1压缩速度最快，9最优压缩方式
                            // [使用一张图片测试之后1和9压缩的力度不大，相差100字节左右]
                        }
                    })
                   .then(function (content) {
                    // 压缩的结果为blob类型（二进制流）,可用作文件上传
                    console.info(content);
                    // 直接在浏览器打成car.zip包并下载，saveAs依赖的js是FileSaver.js
                    saveAs(content, "car.zip");
                });
            }
        });
    });
</script>
</html>

这里只是简单将图片压缩成zip包，然后以blob二进制流的方式展示了一下，详情可以去官网了解

4、详细记录generateAsync的一些参数

图片压缩最后是为了上传文件，使用generateAsync压缩后可以直接上传。简单的了解一下jszip中的相关参数，如图：

多文件打入Zip文件是，有些文件不需要重复上传或者需要做特别的说明是，生成文件的时候也可以使用“comment”属性，java后台通过解压Zip，可以直接获取"comment"属性，如： zipEntry.getComment()。

// js 可以添加文件的说明
zip.file("a.jpg", "content", {
     comment: "a.jpg is not a picture"
});

// java后台可以直接获取
Enumeration<ZipEntry> entries = zipFile.getEntries();
while(entries.hasMoreElements()) {
    ZipEntry zipEntry = entries.nextElement();
    System.out.println(zipEntry.getComment());		
}

5、参考资料

官方网址：JSZip