从 url 下载 PDF，将其保存在文件中，压缩然后下载 zip

Question

一直在使用 jszip 创建和下载 zip 文件。我可以单独下载pdf文件。但我想将这些pdf下载到zip文件夹中，然后下载zip文件。

下载 pdf 的代码片段：

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       window.location.href = "pdf_url"
    }
};
xhttp.open("GET", "pdf_url");
xhttp.send();

向其中添加 zip api：

    var zip = new JSZip();
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
           window.location.href = "pdf_url"
           zip.file("file_name", pdf_url_content);
        }
    };
    xhttp.open("GET", "pdf_url");
    xhttp.send();

正在创建 zip：

  zip.generateAsync({type:"blob"})
    .then(function callback(blob) {
      saveAs(blob, "example.zip");
    }

pdf_url_content应该有url的内容。如何阅读该内容？我尝试使用 jszip-utils。无法继续。任何帮助将不胜感激。

提前致谢。

Answer 1

首先，压缩 pdf 是没有用的，因为用户将使用 xmlhttprequest 解压缩然后压缩，因此他将不得不免费下载文件两次。

我还是回答了你的信息

您应该将正确的内容类型设置为 xmlhttprequest，并将 responseType 设置为 blob。然后您可以使用 onreadstatechange 回调

中的 属性 response 访问 pdf 的内容

var zip = new JSZip();
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "pdf_url");
xhttp.responseType = "blob";
xhttp.setRequestHeader("Content-type", "application/pdf");
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       zip.file("file_name", xhttp.response);
       zip.generateAsync({type:"blob"})
          .then(function(blob) {
               saveAs(blob, "example.zip");
          });
    }
};

xhttp.send();

请注意，下载部分需要 FileSaver.js（saveAs 函数）。