<iframe>可实现PDF在线预览，但依赖浏览器原生支持及跨域配置，需处理路径、MIME类型、安全限制，并提供fallback提示；兼容性不足时推荐PDF.js等替代方案。
用 <iframe> 标签可以实现 PDF 文件的在线预览，但效果和兼容性取决于浏览器是否内置 PDF 查看器（如 Chrome、Edge、Firefox 默认支持），以及 PDF 的来源是否允许嵌入。
基础写法：直接嵌入 PDF 链接
最简单的方式是将 PDF 的 URL 作为 src 属性值：
注意：
- 确保 PDF 文件路径正确，且服务器允许跨域访问（若 PDF 在其他域名下，需目标服务器返回 Access-Control-Allow-Origin 头）；
- 某些 PDF 可能被浏览器自动下载而非预览，可在 URL 后加 #toolbar=0&view=fitH 控制显示效果（如隐藏工具栏、适配高度）；
- 移动端 Safari 对 iframe 内 PDF 支持有限，有时会跳转到全屏阅读器。
增强兼容性：添加备用提示与 fallback 内容
为不支持内联 PDF 的环境提供友好提示：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
<p>您的浏览器不支持直接查看 PDF，请<a href="report.pdf">点击下载</a>或使用 Chrome、Edge 等现代浏览器打开。</p>
</iframe>
iframe 内的 HTML 内容仅在无法加载或不支持时显示，是标准 fallback 方式。
立即学习“前端免费学习笔记（深入）”；
安全与部署注意事项
- PDF 必须托管在支持 HTTP(S) 协议的服务上，本地 file:// 路径在多数浏览器中会被拒绝加载（CORS 和安全策略限制）；
- 若 PDF 存于私有目录，需确保 Web 服务器配置了正确的 MIME 类型（
application/pdf），否则可能触发下载而非预览； - 避免使用用户上传的未经校验的 PDF 直接嵌入，防止 XSS 或恶意 JS 注入（PDF 本身不执行 JS，但 iframe 加载过程需防范钓鱼或重定向风险）。
替代方案（当 iframe 不可靠时）
如果需要更高一致性，可考虑：
- 前端 PDF 库如 PDF.js（Mozilla 开源）：完全基于 JS 渲染，兼容所有现代浏览器，不依赖浏览器原生能力；
- 后端转换为图片或 HTML：适合静态文档，但丧失文本选择、搜索、缩放等 PDF 原生功能；
- 调用第三方服务（如 Google Docs Viewer）：例如
https://docs.google.com/gview?url=YOUR_PDF_URL&embedded=true，但需注意隐私与外链策略。
