本文介绍如何通过纯前端 javascript（配合 pdf.js）读取用户输入的 pdf url（如本地服务器路径），获取其总页数并动态显示在 html 页面中，同时说明跨域限制及解决方案。

在 Web 开发中，常需动态解析 PDF 文档信息（如页数），但直接通过 输入任意 PDF 链接（例如 Google Drive、外部网站）并用 fetch 读取时，会因浏览器 同源策略（CORS） 而失败——尤其是公共云存储（如 drive.google.com）默认不向第三方站点开放跨域访问头（Access-Control-Allow-Origin）。因此，该方案仅适用于同源 PDF 资源（即 PDF 文件托管在同一域名下，如 https://yoursite.com/docs/report.pdf 或 http://localhost:8080/sample.pdf）。

以下为完整可运行的实现方案：

✅ 正确实现步骤（同源 PDF）

1. 用户在文本框中输入 PDF 的同源 URL；
2. 点击按钮后，使用 fetch() 获取 PDF 二进制流；
3. 将响应转为 Blob，再用 FileReader 读取为 ArrayBuffer；
4. 交由 pdfjsLib.getDocument() 解析，并提取 pdf.numPages。

  
  


  
    
Count Pages inside PDF Document
    
      
      Get Number of Pages
    
    

    

  

  
  
  

⚠️ 重要注意事项

• ❌ Google Drive、OneDrive、Dropbox 等不支持直连：它们返回的是 HTML 重定向页，而非原始 PDF 流；即使强制加 &export=download，也因缺失 CORS 头而被浏览器拦截。
• ✅ 可行场景：
  • 本地开发服务器（http://localhost:8080/report.pdf）；
  • 同一域名下的静态资源（https://yourdomain.com/files/book.pdf）；
  • 自建后端代理（如 Express/Nginx 添加 Access-Control-Allow-Origin: *）；
• ?️ 安全提示：避免在生产环境对不可信 PDF 执行 getDocument()，存在潜在解析风险（建议服务端预校验）；
• ? 替代方案（如需支持任意公网 PDF）：必须引入服务端代理（Node.js/PHP/Python）绕过 CORS，或使用支持 CORS 的 PDF 托管服务（如 GitHub Pages + raw link + CORS proxy）。

综上，本方案是轻量、零依赖的前端页数检测方案，适用于可控环境下的 PDF 元数据快速提取。务必确认目标 PDF 可被浏览器合法跨域加载，否则将触发 TypeError: Failed to fetch 或 CORS 错误。