必须显式声明 type="application/pdf",否则 Firefox 直接下载;width/height 勿仅用 100%,应设像素值或 vw/vh;备用内容需配合下载链接;data 路径须绝对且服务端返回正确 Content-Type;PDF 加密可能导致静默失败。

必须显式声明 type="application/pdf"
Firefox 会把没声明 type 的 <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>撑满父容器(width: 100%; height: 100%)
备用内容不是摆设,但别指望它总生效
<object> 内部的文本(比如 <p>您的浏览器不支持 PDF</p>)是给不支持内嵌 PDF 的环境准备的。但现实是:
- Chrome on Android 会直接显示自己的下载提示,无视你的
<p> - iOS Safari 可能只渲染第一页,且不触发备用内容
- 某些企业内网浏览器禁用了 PDF 渲染模块,此时备用内容才真正起作用
所以,备用内容要写,但得配合一个真实的 <a href="xxx.pdf" download>下载PDF</a> 链接,放在同一位置。
立即学习“前端免费学习笔记(深入)”;
路径问题比想象中更敏感
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。



















