JS文件打包类库jszip.js

简介

jszip.js是一个JavaScript类库，用来操作.zip文件的工具。

使用

1.  引入文件

<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>

2.  HTML

<input type="file" id="file"/><img src="" id="image">

3.  调用

<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>

相关链接

官网地址 ：https://stuk.github.io/jszip/

GiHub 地址：https://github.com/Stuk/jszip/