Добавление изображений из URL-адреса в zip-файл с помощью jsZip

Я пытаюсь создать zip-файл с помощью jsZip. Содержимое zip-файла — изображения из Интернета. Я создал следующий код. Но когда я запускаю все это, я получаю пустой zip-файл размером 22 КБ.

<html>
<body>
  <script type="text/javascript" src="jszip.js"></script>
  <script type="text/javascript" src="FileSaver.js"></script>
  <script type="text/javascript" src="jszip-utils.min.js"></script>
  <script>
    var imgLinks = ["url1", "url2", "url3"];

    function create_zip() {
      var zip = new JSZip();
      for (var i = 0; i < imgLinks.length; i++) {
        JSZipUtils.getBinaryContent(imgLinks[i], function(err, data) {
          if (err) {
            alert("Problem happened when download img: " + imgLink[i]);
            console.erro("Problem happened when download img: " + imgLink[i]);
            deferred.resolve(zip); // ignore this error: just logging
            // deferred.reject(zip); // or we may fail the download
          } else {
            zip.file("picture" + i + ".jpg", data, {
              binary: true
            });
            deferred.resolve(zip);
          }
        });
      }
      var content = zip.generate({
        type: "blob"
      });
      saveAs(content, "downloadImages.zip");
    }
  </script>
  <br/>
  <br/>
  <center>
    Click the button to generate a ZIP file
    <br/>
    <input id="button" type="button" onclick="create_zip()" value="Create Zip" />
  </center>
</body>
</html>

(url1, url2 и url3 заменены URL-адресами изображений, которые я хочу загрузить).

Почему я получаю эти пустые zip-файлы?


person Sreeraj T A    schedule 02.01.2015    source источник
comment
у вас есть фиксированная версия этого?   -  person Nick Garver    schedule 28.09.2016
comment
Я просто использовал прокси CORS. corsproxy.com/mangacow.co/wp- content/manga/29/172/0002.jpg .. вместо прямого URL-адреса я добавил его к бесплатному URL-адресу прокси-сервера CORS, и это решило проблему.   -  person Sreeraj T A    schedule 30.09.2016


Ответы (1)


JSZipUtils.getBinaryContent является асинхронным: содержимое будет добавлено после вызова zip.generate(). Вы должны дождаться получения всех изображений перед созданием zip-файла.

Редактировать :

Если файлы, которые вы загружаете, находятся на другом сервере, этому серверу необходимо отправить дополнительные заголовки HTTP, например Access-Control-Allow-Origin: server-hosting-the-page.com. В этом случае консоль отладки Firefox или Chrome покажет ошибку. Библиотека js не может обнаружить проблему CORS (см. здесь) и вызовет успех с пустым содержанием.

person David Duponchel    schedule 02.01.2015
comment
Итак, как мне проверить, завершилась ли загрузка изображений, перед созданием zip? - person Sreeraj T A; 03.01.2015
comment
Если вы используете отложенные объекты, вы можете посмотреть этот пример и функцию deferredAddZip здесь. Он использует отложенные объекты jQuery, но его легко изменить. - person David Duponchel; 03.01.2015
comment
Чем вам за ваши ответы. Попробовал код, и теперь zip различается по размеру в зависимости от количества поставляемых файлов, и все изображения присутствуют внутри zip-файла, но все изображения имеют размер 0 байт, и при открытии в средстве просмотра изображений ничего не отображается ... Есть идеи ?? - person Sreeraj T A; 03.01.2015
comment
Моя первая идея: убедитесь, что вы ждете разрешения всех отложенных объектов перед созданием zip ($.when.apply($, deferreds) строка 75). Кроме этого, вы можете использовать отладчик (или console.log), чтобы проверить, что содержит data (это должен быть ArrayBuffer в последнем браузере). Если вы все еще не можете найти проблему, мне нужен рабочий пример кода :) - person David Duponchel; 03.01.2015
comment
Я попробовал тот же демонстрационный код, который вы дали, и заменил URL-адреса файлов URL-адресами на некоторые файлы jpeg, но файлы внутри zip имеют размер 0 байт, а размер zip-файла зависит от количества изображений. - person Sreeraj T A; 03.01.2015
comment
Похоже на проблему CORS. При выполнении межсайтовых ajax-запросов браузер ожидает, что удаленный файл будет обслуживаться с некоторыми заголовками (например, Access-Control-Allow-Origin). Вы пытаетесь разместить изображения на сервере, отличном от вашей страницы? - person David Duponchel; 03.01.2015
comment
Затем вам нужно обновить сервер, чтобы добавить заголовки HTTP (или использовать текущий сервер в качестве прокси для загрузки файлов), см. обновление в моем ответе. - person David Duponchel; 03.01.2015
comment
Значит, нет другого способа сделать это, не используя текущий сервер в качестве прокси?? Я пытался оставить все на стороне клиента, тем самым сократив время, необходимое для создания zip-архива. В настоящее время я использую PHP для этого, файлы изображений загружаются из внешнего источника на мой сервер, создавая zip на сервере, а затем возвращая его пользователю для загрузки. Но это занимает слишком много времени, так как пользователю приходится ждать, пока изображения будут загружены на мой сервер из внешнего источника и добавлены в zip. - person Sreeraj T A; 03.01.2015
comment
Независимо от используемой библиотеки браузер не разрешает межсайтовый запрос ajax, если удаленный сервер не разрешает это явно. Самый простой способ — обновить удаленный сервер, чтобы добавить некоторые заголовки. Если это невозможно, вам нужно будет найти обходной путь (использование текущего сервера в качестве прокси-сервера — это первое, о чем я думаю, вы можете найти и другие). - person David Duponchel; 03.01.2015
comment
Большое спасибо за все ваши ответы :) - person Sreeraj T A; 03.01.2015
comment
gogol.6te.net/index.html , это демонстрационный скрипт, который я использую и успешно нашел обходной путь с помощью прокси-сервера CORS. Он отлично работает в Firefox, но при использовании в Google Chrome я получаю сообщение об ошибке Failed-no file. - person Sreeraj T A; 04.01.2015
comment
У меня это работает в Firefox/Chromium (linux) и Firefox/Google Chrome (Windows), я не получаю никаких ошибок. - person David Duponchel; 04.01.2015
comment
s14.postimg.org/tm6ykt3g1/chrome_prob.png, это скриншот, мой хром обновлен. ОС: windows, проверил это и на Android, и отлично работал как на Chrome, так и на Firefox для Android. Кстати, вы один из разработчиков jszip? - person Sreeraj T A; 04.01.2015
comment
Я вижу 2 ошибки на вашем скриншоте (красный крестик справа с 2), вы должны проверить вкладку Консоль. И да, я один из разработчиков :) - person David Duponchel; 04.01.2015