如何在网页中直接访问 ZIP 内嵌的 PDF 文件？

浏览器无法直接通过 链接打开 ZIP 压缩包内的 PDF 文件；必须先解压（服务端预解压或前端 JS 动态解压），才能实现点击即览。本文详解两种可行方案：推荐的静态解压部署法，以及适用于动态场景的前端 JSZIP 实时解压方案。

浏览器无法直接通过 `

✅ 推荐方案：服务端预解压（简单、高效、兼容性最佳）

<!-- 解压后目录结构示例：/docs/file1.pdf, /docs/myfile/file2.pdf, /docs/myfile/file3.pdf -->
<a href="/docs/file1.pdf" target="_blank">file1.pdf</a>
<a href="/docs/myfile/file2.pdf" target="_blank">file2.pdf</a>
<a href="/docs/myfile/file3.pdf" target="_blank">file3.pdf</a>

#!/bin/bash
# watch-zips.sh：监控 ZIP 变更并自动解压
IN_DIR="/var/www/docs/archives"
OUT_DIR="/var/www/docs/unzipped"

find "$IN_DIR" -name "*.zip" -newermt "$(stat -c '%y' "$OUT_DIR" 2>/dev/null || echo '1 hour ago')" | \
  while read zip; do
    dir_name=$(basename "$zip" .zip)
    unzip -o "$zip" -d "$OUT_DIR/$dir_name" '*.pdf' 2>/dev/null
    echo "✅ Extracted $zip → $OUT_DIR/$dir_name"
  done

若受限于环境（如纯静态托管、无法运行后台脚本），可借助 JSZip + PDF.js 在浏览器中完成「点击→下载 ZIP→解压→渲染 PDF」全流程。注意：此方案对用户设备性能、网络带宽和 ZIP 大小敏感，不适用于 >10MB 的 ZIP 或低配终端。

? 基础实现步骤（需引入 JSZip 和 PDF.js）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script>

<a href="#" data-zip="myfile.zip" data-file="file2.pdf">file2.pdf (in ZIP)</a>

<script>
document.querySelectorAll('a[data-zip]').forEach(link => {
  link.addEventListener('click', async (e) => {
    e.preventDefault();
    const zipName = link.dataset.zip;
    const pdfName = link.dataset.file;

    try {
      // 1. 获取 ZIP 文件（需同源或配置 CORS）
      const zipRes = await fetch(zipName);
      const zipBytes = await zipRes.arrayBuffer();
      const zip = await JSZip.loadAsync(zipBytes);

      // 2. 查找并读取 PDF
      const pdfFile = zip.file(pdfName);
      if (!pdfFile) throw new Error(`PDF not found: ${pdfName}`);

      const pdfData = await pdfFile.async('arraybuffer');

      // 3. 使用 PDF.js 渲染（此处简化为创建新窗口显示）
      const blob = new Blob([pdfData], { type: 'application/pdf' });
      const url = URL.createObjectURL(blob);
      window.open(url, '_blank');
    } catch (err) {
      alert(`Failed to load PDF: ${err.message}`);
    }
  });
});
</script>

⚠️ 重要注意事项：

• CORS 限制：fetch('myfile.zip') 要求 ZIP 文件与 HTML 同源，或服务器配置 Access-Control-Allow-Origin: *；
• 内存占用：大 ZIP 文件可能导致浏览器卡顿甚至崩溃；建议对 ZIP 添加大小校验（如 if (zipBytes.byteLength > 8 * 1024 * 1024) throw 'Too large'）；
• 用户体验：首次点击需等待 ZIP 下载 + 解压（无进度提示），建议添加 loading 状态；
• 安全风险：ZIP 内文件名可能含路径遍历（如 ../etc/passwd），务必校验 pdfName 是否为合法 PDF 文件名（正则 /^[a-zA-Z0-9._-]+\.pdf$/）。

总结

强烈建议优先采用服务端预解压方案——它本质是将“压缩存储”与“Web 访问”职责分离，符合 Web 架构最佳实践。而 JSZIP 方案应作为兜底手段，仅用于技术验证或极简原型。无论选择哪种方式，请始终确保 ZIP 来源可信，并对解压路径进行严格白名单校验，避免潜在的安全隐患。