Package External Files in JSZip

Question

I'm working on a code editor, where I check what libraries I want and as long as say Normalize or FontAwesome, zip files from my server are loaded into JSZip that way when I export my code, all my libraries are incorporated into the zip file without hyperlinking.

All the libraries (38 to be exact) to be loaded are on my server. However I've only loaded files into a zip file in JSZip by following the Filereader and AJAX from the demos listed on JSZip's website.

Basically I'm trying to load multiple zip files into a new jszip package.

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

So if I understand your question correctly, you want to zip up libraries that are stored on your server?

If so, you could use an XMLHttpRequest to get the content and zip it up, like this:

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