Проблема в создании Zip файла с помощью JavaScript

Question

В моем проекте есть требование, согласно которому, когда пользователь выбирает несколько файлов для загрузки, нам нужно сжать их, а затем сделать их для загрузки. Мы проверили, что действие Struts2 правильно выводит список всех файлов и передает их в пользовательский интерфейс. Мы убедились, что файлы перечислены в пользовательском интерфейсе правильно, но при выполнении оператора blob файл zip поврежден. Вот мой фрагмент кода. Может кто-нибудь помочь, пожалуйста, здесь?

Код:

   $.ajax({
      url: url,
      data: data,
      type: "POST",
      async: true,
      success: function (data) {
        var binaryData = [];
        binaryData.push(data);
        var link=document.createElement('a');
        link.href =window.URL.createObjectURL(**new Blob(binaryData, {type: "application/zip"**}));
        link.download = "User Reports Data Files.zip"
        link.click();
      },
      error: function (request, status, error) {
      }
    }); 

Answer 1

Два ответа для вас:

1. Я не думаю, что вы можете надежно загрузить двоичные данные с помощью функции jQuery ajax (но я могу ошибаться). Если вы хотите загрузить двоичный файл, используйте fetch, который поддерживает чтение ответа в виде встроенного BLOB-объекта.

2. Было бы проще иметь на своей странице iframe нулевой высоты name="download-target", а затем иметь form target="download-target method="post" и передать его вместо использования ajax. Убедитесь, что ответ содержит заголовок Content-Disposition, например:

   Content-Disposition: attachment; filename="User Reports Data Files.zip"
   

# 2 проще и позволяет браузеру обрабатывать загрузку обычным, тщательно протестированным способом.

Но вот эскиз № 1:

fetch(url, {
    method: "POST",
    body: data
})
.then(response => {
    if (!response.ok) {
        throw new Error("HTTP status " + response.status);
    }
    return response.blob();
});
.then(blob => {
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = "User Reports Data Files.zip"
    link.style.display = "none";         // Firefox wants this
    document.body.appendChild(link);     // ""
    link.click();
    setTimeout(() => {                   // ""
        document.body.removeChild(link); // ""
    }, 10000);                           // ""
})
.catch(error => {
    // Handle/report the error
});