HTML5无原生PDF渲染能力，等标签依赖浏览器内置查看器，效果受限；推荐使用pdfjs-dist库实现可控渲染，支持分页、缩放、搜索等功能，需正确配置worker路径并处理Promise错误。
HTML5 本身没有原生 PDF 渲染能力，<iframe></iframe>、<embed></embed>、<object></object> 都只是调用浏览器内置 PDF 查看器（如 Chrome 的 PDFium），效果和兼容性取决于用户环境；真正可控的预览必须依赖 JavaScript 库，比如 pdfjs-dist。
用 <iframe></iframe> 直接加载 PDF（最简但限制多）
适合内网或已知用户使用 Chrome/Edge/Firefox 的场景，不支持自定义 UI、无法监听加载失败、移动端体验差。
-
<iframe src="doc.pdf" width="100%" height="600px"></iframe>—— 最常用，但 Safari 在 iOS 上常直接下载而非预览 - 加
#toolbar=0&navpanes=0&scrollbar=0可隐藏 Adobe Reader 参数（仅对 Acrobat 插件有效，现代浏览器基本忽略） - 若 PDF 跨域，需服务端设置
Access-Control-Allow-Origin，否则 iframe 白屏无报错
用 pdfjs-dist 实现完全可控的渲染（推荐方案）
Mozilla 官方维护，纯 JS 渲染，不依赖插件，支持分页、缩放、文本选择、搜索，适合生产环境。
- 通过 npm 安装：
npm install pdfjs-dist，注意 v2.16+ 默认使用 ESM，需适配构建工具 - 关键路径要对：
pdfjsLib.GlobalWorkerOptions.workerSrc = '/node_modules/pdfjs-dist/build/pdf.worker.min.js';（静态资源需正确部署） - 加载时务必用
pdfjsLib.getDocument()，它返回 Promise，错误需显式.catch()，否则静默失败 - 单页渲染示例：
pdfjsLib.getDocument('manual.pdf').promise.then(pdf => { return pdf.getPage(1).then(page => { const viewport = page.getViewport({ scale: 1.5 }); const canvas = document.getElementById('pdf-canvas'); const ctx = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; return page.render({ canvasContext: ctx, viewport }).promise; }); });
移动端 PDF 预览的兼容性陷阱
iOS Safari 对 <iframe></iframe> 和 <embed></embed> 支持极不稳定，经常触发下载；Android 各厂商 WebView 行为也不一致。
立即学习“前端免费学习笔记（深入）”；
- 不要依赖
window.open('xxx.pdf')，iOS 会拦截并空白 - 避免用
data:URL 嵌入大 PDF（内存爆炸、Safari 限制约 5MB） - pdfjs 在 iOS 上需手动启用
isOffscreenCanvasSupported: false，否则部分机型渲染异常 - 若必须用 iframe，可 fallback 到
<a href="x.pdf" target="_blank">查看 PDF</a>，至少保证能打开
真正难的不是“怎么显示”，而是“怎么在不崩掉手机内存的前提下，支持 100 页 PDF 的快速跳转和文字搜索”——这需要做按需加载、页面缓存、worker 分离，而这些 pdfjs 都提供了接口，但默认不开启。
