JSZip压缩PDF与JPEG文件出现损坏问题求助

问题根源在于原代码使用了readAsBinaryString方法处理文件，该方法会将二进制数据转换为字符串，过程中会破坏非文本文件的字节结构，导致压缩后的文件无法正常打开。JSZip本身支持直接接收File、Blob或ArrayBuffer类型的二进制数据，无需通过字符串中转。

修改后的完整代码 #

let fileInput;

document.addEventListener("DOMContentLoaded", function () {
  fileInput = document.getElementById("file");
});

async function zip() {
  const file = fileInput.files[0];
  if (!file) return;

  const zip = new JSZip();
  // 直接传入File对象，JSZip自动处理二进制数据
  zip.file(file.name, file);

  // 生成Blob类型的压缩包，比base64更高效
  const zipBlob = await zip.generateAsync({ type: "blob" });

  createDownloadLink(zipBlob, "signed.zip");
}

function createDownloadLink(blob, fileName) {
  let link = document.getElementById("downloadLink");
  if (link) link.remove();

  link = document.createElement("a");
  link.innerHTML = "Download zip";
  // 使用URL.createObjectURL创建Blob下载链接
  link.href = URL.createObjectURL(blob);
  link.download = fileName;
  link.id = "downloadLink";

  document.getElementById("downloadLinkPanel").appendChild(link);

  // 页面卸载时释放URL对象，避免内存泄漏
  window.addEventListener("unload", () => {
    URL.revokeObjectURL(link.href);
  });
}

关键修改说明 #

• 移除FileReader：直接将用户选择的File对象传入zip.file()，跳过字符串转换步骤，保留完整的二进制字节结构。
• 改用Blob类型生成压缩包：generateAsync({ type: "blob" })生成的Blob对象比base64更适合处理二进制文件，内存占用更低，处理速度更快。
• 优化下载链接生成：使用URL.createObjectURL创建Blob的临时下载链接，替代原有的base64拼接方式，同时添加了URL对象的释放逻辑，避免长期运行导致的内存泄漏。

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