标签最轻量但 safari 不支持 pdf 渲染，需用 配 google docs viewer 或自托管 pdf.js；注意同源、mime 类型、路径可达性及移动端手势适配。
用 <embed></embed> 标签最简单，但 Safari 不支持 PDF 渲染
直接插入 PDF 预览，<embed></embed> 是最轻量的方案，一行代码就能加载本地或远程 PDF：
@@@###@@@但它在 Safari（尤其是 macOS 14+ 和 iOS）上会显示空白或提示“无法预览”，因为 Safari 默认禁用第三方 MIME 类型渲染。Chrome 和 Edge 没问题，Firefox 依赖系统 PDF 查看器（如 pdf.js 启用时才可用）。
常见错误现象：embed 在 Safari 控制台无报错，但页面只留白框；PDF 文件路径正确、网络可访问，仍不显示。
- 确保
src是同源 URL，跨域 PDF 需服务端配Access-Control-Allow-Origin -
type必须写成"application/pdf"，写成"pdf"或漏掉会退化为下载链接 - 不要嵌套
<embed src="manual.pdf" type="application/pdf" width="100%" height="600"></embed>在<object></object>里“兜底”——这反而触发 Safari 更严格的拦截逻辑
<iframe></iframe> 兼容性最好，但得走 Google Docs 或 PDF.js 中转
<iframe></iframe> 本身不能直接渲染 PDF（除非浏览器内置支持且允许），但通过中转服务能绕过兼容性问题。最常用的是 Google Docs Viewer：
<iframe src="https://docs.google.com/gview?url=https://yoursite.com/report.pdf&embedded=true" width="100%" height="600" frameborder="0"></iframe>它在所有现代浏览器都可用，但有明显限制：PDF 必须公开可爬，且文件大小不能超 50MB；Google 可能缓存旧版本，更新后需清缓存或加时间戳参数。
更可控的方式是自托管 pdf.js（Mozilla 官方库）：
<iframe src="/pdfjs/web/viewer.html?file=/docs/manual.pdf" width="100%" height="600"></iframe>需要提前部署完整
pdf.js 包，但完全可控、无外链依赖、支持密码保护 PDF。
立即学习“前端免费学习笔记（深入）”；
- Google Docs 方式下，
url参数必须是绝对 URL（含http://或https://），相对路径会失败 - 用
pdf.js时，确保viewer.html和build/目录结构完整，否则控制台报"Cannot find worker" - 移动端 iframe 高度建议用
min-height+ JS 动态适配，否则容易截断内容
PDF 路径 404 或 CORS 报错？检查三件事
无论用 embed 还是 iframe，最常见的失败不是语法错，而是资源不可达。打开 DevTools 的 Network 面板，看 PDF 请求是否返回 200 —— 很多时候你看到“白框”，其实是请求卡在 404、403 或 CORS 拒绝上。
- 静态文件服务器（如 Nginx、Vite、Next.js）默认不支持
.pdfMIME 类型，需手动添加application/pdf映射，否则返回text/plain，浏览器拒解析 - PDF 放在
/public目录（如 Vite/React）没问题，但若放在/src下，构建后根本不会输出，路径自然 404 - 本地开发用
file://协议打开 HTML？所有现代浏览器都会因安全策略阻断 PDF 加载，必须走http://localhost启服务
移动端双击缩放失效、滚动卡顿？别硬扛，加一层 wrapper
PDF 渲染容器（embed 或 iframe）在 iOS 和 Android 上常出现手势冲突：双击不放大、上下滚动拖不动、甚至整个页面卡死。这不是 PDF 本身的问题，而是浏览器对内嵌文档的 touch 事件处理过于保守。
一个实操性强的解法是用 CSS 封装一层“手势透传”容器：
<div class="pdf-wrapper"><br> @@@###@@@<br></div>
然后加这段 CSS：
.pdf-wrapper {<br> -webkit-overflow-scrolling: touch;<br> overflow: auto;<br>}<br>.pdf-wrapper embed {<br> display: block;<br> width: 100%;<br> height: 600px;<br> -ms-zoom: 1;<br> zoom: 1;<br>}
- iOS 上必须加
-webkit-overflow-scrolling: touch，否则内部滚动完全失灵 - 避免给
embed或iframe设height: 100vh，Safari 对视口单位在嵌入内容中解析异常 - 如果 PDF 内容文字模糊，大概率是缩放未触发，可在加载后用 JS 主动调一次
window.print()触发重绘（仅调试用）
