Пакет внешних файлов в JSZip

Question

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

Все библиотеки (38, если быть точным), которые необходимо загрузить, находятся на моем сервере. Однако я загружал только файлы в zip-файл в JSZip, следуя 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>