javascript - 在 JSZip 中打包外部文件

Question

我正在开发一个代码编辑器，我可以在其中检查我想要的库，只要说 Normalize或 FontAwesome ，来 self 服务器的 zip 文件被加载到 JSZip这样，当我导出我的代码时，我所有的库都将合并到 zip 文件中，而无需超链接。

要加载的所有库(确切地说是 38 个)都在我的服务器上。但是我只将文件加载到 JSZip 中的 zip 文件中。通过关注Filereader和 AJAX来自 JSZip's 上列出的演示网站。

基本上我正在尝试将多个 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>