使用<object>标签加载PDF时，通过data属性指定路径并内置HTML内容作为备选渲染，可实现无JS的降级兼容；需设type="application/pdf"，推荐文字提示+下载链接fallback。
使用 <object> 标签加载 PDF 文件时，data 属性指定 PDF 路径，同时通过内部内容提供备选渲染（fallback），确保在不支持内嵌 PDF 的环境（如旧浏览器、禁用插件或无 PDF 查看器的设备）下仍能提示用户或提供替代方案。
基础写法：设置 data 并嵌入 fallback 内容
<object> 标签本身不依赖 JavaScript，纯 HTML 即可实现降级。关键在于：data 属性指向 PDF 地址，标签内部写 HTML 内容作为备选。浏览器若能渲染 PDF，就显示 PDF；否则显示内部内容。
- PDF 路径需为相对或绝对 URL，建议使用相对路径（如
./docs/report.pdf）便于部署 - 内部可放文本提示、下载链接、图片占位符，甚至嵌套
<embed>或<iframe>作为次级 fallback - 务必设置
type="application/pdf"，帮助浏览器识别资源类型，提升兼容性
推荐 fallback 方案：文字提示 + 下载链接
最稳妥的备选是清晰告知用户并提供下载入口，避免空白或报错：
<object data="manual.pdf" type="application/pdf" width="100%" height="600">
<p>您的浏览器无法直接查看 PDF 文件。<br>
<a href="manual.pdf" download>点击此处下载 PDF</a></p>
</object>
该写法在 Safari（旧版）、IE、部分移动端 WebView 中均能正常回退，且语义明确、操作直接。
立即学习“前端免费学习笔记（深入）”；
增强兼容性：嵌套 <embed> 作为二级 fallback
某些浏览器（如较老 Chrome/Firefox）对 <object> 的 PDF 渲染不稳定，可在内部嵌套 <embed> 提供第二层尝试：
<object data="guide.pdf" type="application/pdf" width="100%" height="600"> <embed src="guide.pdf" type="application/pdf" width="100%" height="600" /> <p>PDF 加载失败，请 <a href="guide.pdf">手动下载</a>查看。</p> </object>
注意：<embed> 不是严格意义上的 fallback，而是补充渲染方式；现代浏览器通常优先走 <object>，仅当其失效时才尝试 <embed>。
注意事项与常见问题
实际使用中需避开几个典型陷阱：
- MIME 类型必须匹配：服务器需返回
Content-Type: application/pdf，否则部分浏览器拒绝渲染 - 跨域 PDF 需服务端配置 CORS，否则
data加载会因安全策略失败 - 移动端 Safari 对
<object>支持有限，常直接触发下载而非内嵌，此时 fallback 文案尤为重要 - 避免仅用空文本或
