Упаковать внешние файлы в JSZip

Я работаю над редактором кода, где проверяю, какие библиотеки мне нужны, и пока говорю Normalize или FontAwesome, zip-файлы с моего сервера загружаются в JSZip таким образом, когда я экспортирую свой код, все мои библиотеки включаются в zip-файл без гиперссылок.

Все библиотеки (точнее, 38), которые нужно загрузить, находятся на моем сервере. Однако я загружал файлы только в zip-файл в JSZip, следуя Filereader и AJAX из демонстраций, перечисленных на веб-сайт JSZip.

В основном я пытаюсь загрузить несколько 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>


javascript jquery jszip
person Michael Schwartz    schedule 02.08.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Итак, если я правильно понял ваш вопрос, вы хотите заархивировать библиотеки, которые хранятся на вашем сервере?

Если это так, вы можете использовать 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>
person geekonaut    schedule 02.08.2015