HTML5 无法原生渲染 PDF，需依赖浏览器内置查看器（如 PDFium）或 pdf.js 库；iframe 方式简单但控制弱、兼容差；pdf.js 可完全控制渲染但需处理 worker 路径、CORS、字体等配置。
HTML5 本身没有原生 PDF 渲染能力，不能直接“嵌入并渲染 PDF”——你看到的所谓“HTML5 嵌入 PDF”，实际是靠浏览器内置 PDF 查看器（如 Chrome/Edge 内置的 PDFium）或第三方 JS 库（如 pdf.js）实现的预览。
用
多数现代浏览器支持通过 显示 PDF，本质是调用浏览器自带 PDF 查看器：
- ✅ 无需额外 JS，适合静态文档、内网环境、快速上线
- ⚠️ Safari 在 iOS 上可能强制下载而非预览；Firefox 默认禁用内建 PDF 查看器（需用户手动开启
pdfjs.disabled = false） - ⚠️ 无法自定义 UI（缩放、翻页、搜索）、无法监听加载状态、无法处理加密 PDF 或跨域资源（CORS）
- ⚠️ URL 必须同源，或服务端返回
Access-Control-Allow-Origin: *（否则 iframe 白屏无报错）
用 Mozilla pdf.js 实现完全可控的 HTML5 PDF 预览
这是真正意义上“基于 HTML5 技术栈”的方案：纯 JS 解析 PDF 字节流，用 Canvas 渲染页面，不依赖浏览器 PDF 插件。
- ✅ 支持所有现代浏览器（包括 IE11+，需 polyfill），可处理加密 PDF、自定义工具栏、添加水印、高亮文本
- ✅ 可监听
page-loaded、text-layer-rendered等事件，适合做文档审核、批注系统 - ⚠️ 需托管 pdf.js 的
build/目录（至少含pdf.min.js和pdf.worker.min.js） - ⚠️ 渲染性能取决于 PDF 复杂度和设备性能；大文件首次加载有明显延迟（建议配合 loading 提示 +
PDFJS.disableStream = false启用流式加载） - 示例关键代码：
避免踩坑：常见错误和绕过方法
很多“嵌入失败”其实和 PDF 本身或部署方式有关，不是代码问题：
立即学习“前端免费学习笔记（深入）”；
-
Failed to load PDF file：检查响应头是否含Content-Type: application/pdf；Nginx/Apache 需配置 MIME 类型，否则返回text/plain会导致 pdf.js 解析失败 -
Unexpected server response：后端返回了 401/403 但没设 CORS，浏览器静默拦截；可在PDFJS.getDocument()前加 fetch 检查状态码 - 中文乱码：PDF 内嵌字体缺失，pdf.js 默认不加载远程字体；需在
PDFJS.GlobalWorkerOptions.workerSrc后设置PDFJS.cMapUrl = './cmaps/'并部署对应 CMap 文件 - 移动端缩放卡顿：禁用 pdf.js 的默认手势（
PDFJS.disableInteractiveForms = true），或改用Viewer模式而非手动 Canvas 渲染
真正要落地，得先明确：你要的是“能点开就行”的轻量预览，还是“可集成到业务流程里”的可控组件。前者用 足够，后者必须上 pdf.js——但别直接 npm install pdfjs-dist 后就跑，worker 路径、CORS、字体、跨域 cookie 这几处漏掉一个，页面就白屏且控制台毫无提示。
