在 JSZip 中打包外部文件

Question

我正在开发一个代码编辑器，我可以在其中检查我想要的库，只要在导出代码时这样说 Normalize or FontAwesome, zip files from my server are loaded into JSZip，我所有的库都会合并到 zip 文件中，而无需超链接.

所有要加载的库（确切地说是 38 个）都在我的服务器上。但是我只在 JSZip by following the Filereader and AJAX from the demos listed on JSZip's 网站上将文件加载到一个 zip 文件中。

基本上我正在尝试将多个 zip 文件加载到一个新的 jszip 包中。

$(document).ready(function() {
  var download_to_textbox = function (url, el) {
        return $.get(url, null, function (data) {
          el.val(data);
        }, 'text');
      };

  // Add/Remove Libraries
  $("[data-action=check]").on("change", function() {
    if ( $("#jquery").is(":checked") ) {
      $('.jquery').val(""); download_to_textbox('http://code.jquery.com/jquery-latest.min.js', $('.jquery'));
      $('.jquery').trigger("change");
      $(".jqueryzip").val("  zip.file('js/jquery.js', $('.jquery').val());");
    } else {
      $('.jqueryzip').val("");
    }

    if ( $("#bootstrap").is(":checked") ) {
     
      $('.bootstrap').val(""); download_to_textbox('http://getbootstrap.com/dist/css/bootstrap.css', $('.bootstrap1')); download_to_textbox('http://getbootstrap.com/dist/js/bootstrap.js', $('.bootstrap2'));
      $('.bootstrap1, .bootstrap2').trigger("change");
      $(".bootstrapzip").val("zip.file('css/bootstrap.css', $('.bootstrap1').val());\n  zip.file('js/bootstrap.js', $('.bootstrap2').val());");
    } else {
      $('.bootstrapzip').val("");
    }
    
    $("[data-action=fulljszipfilescode]").val(function() {
      return $.map($(".jszippackage"), function (el) {
        return el.value;
      }).join("\n");
    });
    $(".jszippackage").trigger("change");
    
    $("[data-action=fulljszipcode]").val(function() {
      return $.map($(".jszipcode"), function (el) {
        return el.value;
      }).join("\n");
    });

    $("[data-action=fulljszipcode]").val("$('[data-action=download]').unbind().click(function() {\n  var zip = new JSZip();\n  zip.file('Hello.txt', 'Hello World');\n  " + $("[data-action=fulljszipfilescode]").val() + "\n  var content = zip.generate({type:'blob'});\n  saveAs(content, '123test.zip');\n});");
    
    $("#applyscript script").remove();
    $("#applyscript").append("<scr" + "ipt>" + $("[data-action=fulljszipcode]").val() + " </scr" + "ipt>");
  });
});

.hide {
  display: none;
}

.txtcenter {
  text-align: center;
}

.fill {
  width: 100%;
}

.hide {
  display: none;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="http://stuk.github.io/jszip/dist/jszip.min.js"></script>
<script src="http://stuk.github.io/jszip-utils/dist/jszip-utils.js"></script>
<script src="http://stuk.github.io/jszip/vendor/FileSaver.js"></script>

<div class="container">
  <div class="form-group txtcenter">
    <a class="btn btn-primary btn-lg fill" data-action="download">Download</a>
  </div>
  <div class="form-group">
    <textarea class="form-control" data-action="fulljszipcode"></textarea>
    <textarea class="form-control" data-action="fulljszipfilescode"></textarea>
  </div>
  <div class="form-group">
    <label class="checkbox">
      <input data-action="check" type="checkbox" id="bootstrap">
      Bootstrap (latest)
    </label>
  </div>
  <div class="form-group">
    <textarea class="form-control jszipcode bootstrap bootstrap1"></textarea>
  </div>
  <div class="form-group">
    <textarea class="form-control jszipcode bootstrap bootstrap2"></textarea>
  </div>
  <div class="form-group">
    <textarea class="form-control bootstrapzip jszippackage"></textarea>
  </div>
  <div class="form-group">
    <label class="checkbox">
      <input data-action="check" type="checkbox" id="jquery">
      JQuery (latest)
    </label>
    <textarea class="form-control jszipcode jquery"></textarea>
  </div>
  <div class="form-group">
    <textarea class="form-control jqueryzip jszippackage"></textarea>
  </div>

  <div id="applyscript" class="hide"></div>
</div>

Answer 1

那么，如果我正确理解了你的问题，你想压缩存储在你服务器上的库吗？

如果是这样，您可以使用 XMLHttpRequest 获取内容并将其压缩，如下所示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JSZip sample</title>
</head>
<body>
  <button>Download</button>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
  <script>
  document.querySelector("button").addEventListener("click", function() {

    var zip = new JSZip()
    zip.file('hi.txt', 'Hi there')

    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
      zip.file('jquery.min.js', this.responseText)
      var downloadFile = zip.generate({type:"blob"});
      saveAs(downloadFile, 'test.zip')
    }
    xhr.open('get', 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js')
    xhr.send()
  })
  </script>
</body>
</html>

在 JSZip 中打包外部文件

Package External Files in JSZip

javascript

jquery

jszip