object 标签嵌入 pdf 需同时满足路径正确（同源、http 协议、大小写敏感）、type="application/pdf" 且建议加 typemustmatch、服务端返回 content-type: application/pdf，否则易失败；iframe 是更稳替代方案。
object 标签的 data 属性能嵌入 PDF，但不是“设了就能显示”——它高度依赖路径、响应头、浏览器策略三者同时正确。
data 属性必须指向可访问的同源 PDF 文件
常见错误是本地开发时用 file:// 协议直接双击 HTML 打开，此时 Firefox 可能忽略 type、Chrome 会直接拒绝加载（报 Not allowed to load local resource）。必须走 HTTP 服务，比如 http://localhost:8080。
-
data值必须是相对路径（如"./docs/manual.pdf"）或绝对 URL（如"https://example.com/docs/manual.pdf"），不能是跨域未配 CORS 的地址，否则控制台报Blocked loading resource from cross-origin URL - 路径大小写敏感，Linux 服务器上
Manual.pdf和manual.pdf是两个文件 - 确保文件真实存在于该路径，且 Web 服务器有读取权限（Nginx/Apache 日志里查 404）
type="application/pdf" 缺一不可，typemustmatch 强制校验
只写 data 不写 type，或写成 type="pdf"、type="text/pdf"，浏览器就当未知类型处理，直接 fallback 或空白。Safari 尤其严格，没对的 type 就不渲染。
- 必须显式声明
type="application/pdf" - 加
typemustmatch属性可强制校验：若服务器返回的Content-Type不是application/pdf（比如错配成text/plain或漏配），浏览器就拒绝加载，而不是静默下载 - 检查服务器响应头：用浏览器 DevTools → Network → 点开 PDF 请求 → Headers → Response Headers → 确认含
Content-Type: application/pdf
宽高与 fallback 内容的实际效果很有限
width 和 height 必须设，否则 Chrome/Firefox 默认尺寸极小（常为 300×150），PDF 内容被裁剪。但 fallback 文本（即 object 标签内部的 HTML）在现代浏览器中基本不显示——即使 PDF 加载失败，浏览器也倾向于留白或弹下载，而不是渲染你写的 <p>请下载</p>。
- 推荐最小高度设为
600px，保障基础可读性；宽度可用"100%"适配容器 - 别依赖 fallback 提示用户，应额外加 JS 检测或旁路提供下载链接（比如在
object外再放一个@#@#@#@#@#@#@#@#@#@0） -
style="border: none;"可加可不加，不影响渲染，纯视觉优化
比 object 更稳的替代方案其实是 iframe
如果你只是想展示 PDF，iframe 的兼容性和容错率明显更高：它不校验 Content-Type，不依赖 type 声明，fallback 内容（即 iframe 标签内的文本）在多数不支持场景下真能显示出来。
- 写法更简单：
<iframe src="report.pdf" width="100%" height="600">您的浏览器不支持内嵌 PDF，请下载查看。</iframe> - 支持 URL 参数增强体验，比如
report.pdf#view=fit让 PDF 自动缩放到视口 - 唯一硬限制：目标 PDF 必须同源，或服务器配置了
Access-Control-Allow-Origin和X-Frame-Options: ALLOW-FROM（后者已逐步被Content-Security-Policy: frame-ancestors替代）
真正容易被忽略的点是服务端配置——哪怕 HTML 标签全对，只要服务器没返回正确的 Content-Type 或用了 X-Frame-Options: DENY，PDF 就不会渲染。别只盯着前端代码改，先 curl 或用 Postman 看响应头。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
