必须显式声明 type="application/pdf"，否则 firefox 直接下载；width/height 勿仅用 100%，应设像素值或 vw/vh；备用内容需配合下载链接；data 路径须绝对且服务端返回正确 content-type；pdf 加密可能导致静默失败。
必须显式声明 type="application/pdf"
Firefox 会把没声明 type 的 <object></object> 当作未知资源，直接触发下载而不是渲染。Chrome 和 Safari 虽然有时能自动推断，但行为不一致——尤其在部署到 CDN 或子路径时容易失效。所以不管什么浏览器，都得写死：type="application/pdf"。
width 和 height 别只写 100%
在 Flex 或 Grid 容器里，width="100%" 可能被忽略，导致 PDF 区域塌陷成一条线；height="100%" 更危险，常表现为内容不可见或滚动条错乱。稳妥做法是：
- 设具体像素值，如
width="800px" height="600px" - 或用带单位的百分比，如
width="100vw" height="70vh" - 若需响应式，建议用 CSS 控制容器尺寸，再让
<object></object>撑满父容器（width: 100%; height: 100%）
备用内容不是摆设，但别指望它总生效
<object></object> 内部的文本（比如 <p>您的浏览器不支持 PDF</p>）是给不支持内嵌 PDF 的环境准备的。但现实是：
- Chrome on Android 会直接显示自己的下载提示，无视你的
<p></p> - iOS Safari 可能只渲染第一页，且不触发备用内容
- 某些企业内网浏览器禁用了 PDF 渲染模块，此时备用内容才真正起作用
所以，备用内容要写，但得配合一个真实的 @#@#@#@#@#@#@#@#@#@0 链接，放在同一位置。
路径问题比想象中更敏感
data 属性值必须是可访问的 URL，不能是本地文件路径（如 file:///xxx.pdf），也不能是相对路径写错层级（比如当前页在 /admin/report，PDF 却放在 ./pdfs/file.pdf，实际应为 ../pdfs/file.pdf）。更隐蔽的问题是：
- 服务端未配置
Content-Type: application/pdf，Nginx/Apache 默认可能返回text/plain，导致 Firefox 拒绝渲染 - PDF 文件路径含中文或空格，未做
encodeURIComponent编码，部分浏览器解析失败 - Rails 等框架用 Asset Pipeline 时，必须通过
asset_path("file.pdf")生成带哈希的 URL，硬写data="assets/file.pdf"必然 404
最易被忽略的一点：PDF 文件本身是否加密。哪怕只是“禁止复制”这种轻量级限制，某些浏览器内置阅读器也会静默失败——既不报错，也不渲染，页面留白。遇到这种情况，先用 Acrobat 打开确认权限设置，再决定是否换用 pdf.js。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
