如何将PDF下载后打包为Zip文件？（基于JSZip实现）

我来帮你改造代码，实现把多个PDF打包成Zip后再下载的功能。核心思路是先获取每个PDF的二进制数据（Blob），再用JSZip把这些Blob添加到压缩包中，最后生成Zip文件并触发浏览器下载。

完整代码示例（多PDF场景） #

假设你有多个需要打包的PDF URL，代码可以这样写：

// 初始化JSZip实例
const zip = new JSZip();

// 定义需要打包的PDF URL列表（可根据需求动态生成）
const pdfUrls = [
  "pdf_url_1",
  "pdf_url_2",
  "pdf_url_3"
];

// 封装获取PDF二进制数据的函数
function getPdfBlob(url) {
  return new Promise((resolve, reject) => {
    const xhttp = new XMLHttpRequest();
    xhttp.responseType = "blob"; // 关键：设置响应类型为Blob，获取二进制数据
    xhttp.onreadystatechange = function() {
      if (this.readyState === 4) {
        if (this.status === 200) {
          resolve(this.response); // 成功返回Blob对象
        } else {
          reject(new Error(`获取PDF失败：${url}`));
        }
      }
    };
    xhttp.open("GET", url);
    xhttp.send();
  });
}

// 批量打包并下载Zip的主函数
async function packAndDownloadZip() {
  try {
    // 并行获取所有PDF的Blob数据，提升效率
    const pdfBlobs = await Promise.all(pdfUrls.map(url => getPdfBlob(url)));
    
    // 将每个Blob添加到Zip中，自定义文件名
    pdfBlobs.forEach((blob, index) => {
      zip.file(`文档_${index + 1}.pdf`, blob);
    });
    
    // 生成Zip格式的Blob文件
    const zipBlob = await zip.generateAsync({ type: "blob" });
    
    // 创建临时下载链接并触发下载
    const downloadLink = document.createElement("a");
    downloadLink.href = URL.createObjectURL(zipBlob);
    downloadLink.download = "我的PDF打包文件.zip"; // 设置Zip文件名
    downloadLink.click();
    
    // 释放临时URL，避免内存泄漏
    URL.revokeObjectURL(downloadLink.href);
  } catch (error) {
    console.error("打包Zip失败:", error);
    alert("打包下载出现错误，请稍后重试");
  }
}

// 调用函数开始打包下载
packAndDownloadZip();

单个PDF打包的简化版 #

如果只是需要把单个PDF打包成Zip，代码可以简化成这样：

const zip = new JSZip();
const pdfUrl = "你的PDF地址";

const xhttp = new XMLHttpRequest();
xhttp.responseType = "blob";
xhttp.onreadystatechange = function() {
  if (this.readyState === 4 && this.status === 200) {
    // 将PDF添加到Zip
    zip.file("单个文档.pdf", this.response);
    
    // 生成并下载Zip
    zip.generateAsync({ type: "blob" }).then(function(zipBlob) {
      const downloadLink = document.createElement("a");
      downloadLink.href = URL.createObjectURL(zipBlob);
      downloadLink.download = "单个PDF打包.zip";
      downloadLink.click();
      URL.revokeObjectURL(downloadLink.href);
    });
  }
};
xhttp.open("GET", pdfUrl);
xhttp.send();

关键改动说明 #

• 设置responseType: "blob"：这是和你原有代码最核心的区别——原来的逻辑是直接跳转下载，现在我们需要获取PDF的二进制数据，才能将其添加到Zip包中。
• 用Promise处理异步请求：多PDF场景下，并行请求能避免逐个等待的低效问题，同时保证所有文件都获取完成后再打包。
• 生成Zip并触发下载：通过zip.generateAsync生成Zip格式的Blob，再用临时链接触发浏览器的下载行为，最后记得释放临时URL避免内存浪费。

内容的提问来源于stack exchange，提问作者T Aria