object标签加载pdf需同时满足：data为http/https url、type="application/pdf"、服务端返回content-type: application/pdf、建议加typemustmatch属性。
object 标签加载 PDF 文件必须满足的四个硬性条件
直接写 <object data="report.pdf"></object> 几乎必然失败。现代浏览器只在四个条件全部满足时才尝试内嵌渲染，缺一不可：
-
data必须指向可访问的 HTTP/HTTPS URL（file://协议下 Chrome/Firefox/Safari 均拒绝加载） -
type属性必须严格为"application/pdf"（写成"pdf"、"text/pdf"或留空都无效） - 服务端响应头必须包含
Content-Type: application/pdf（Nginx/Apache 未配置 MIME 类型会导致静默 fallback） - 建议添加
typemustmatch属性，强制校验响应头与type一致，避免 HTML 页面被当 PDF 渲染
为什么 onload 事件不能判断 PDF 是否真正加载完成
load 事件只表示 <object></object> 元素已插入 DOM 并发起请求，不等待 PDF 渲染就绪。你看到白屏、页码未显示、缩放卡顿，load 早已触发。
- 无法通过
objectEl.contentDocument访问 PDF 内容 —— 所有主流浏览器返回null或抛SecurityError - 移动端（iOS Safari、微信 WebView）几乎从不触发
load，也不显示 fallback 内容 - 想实现“加载后自动跳转到第 5 页”，只能靠 URL 参数：
data="report.pdf#page=5"，但该参数在部分安卓 WebView 中被忽略
object 标签修改 data 属性不会重新加载
这是最常被误用的操作：obj.data = "new.pdf" 不会触发任何网络请求或重渲染。浏览器只在元素首次挂载时读取 data 值一次。
- 正确做法是移除旧
<object></object>节点，用document.createElement('object')创建新节点并设置属性后插入 - 不要试图复用同一 DOM 节点做动态切换 —— 它不具备 reactive 行为
- 若需频繁切换 PDF，考虑用
<iframe src="xxx.pdf"></iframe>替代，它支持直接赋值iframe.src = "new.pdf"
fallback 内容不显示的常见原因
写了 <p>PDF 加载失败</p> 却始终看不到，不是代码没写，而是触发条件极苛刻：
- 仅当 HTTP 请求失败（404/503/断网）或响应头
Content-Type与type不匹配时才显示 fallback -
data路径拼错（如"./pdfs/report.pdf"实际在"./static/files/"）不会触发 fallback，只会白屏 - fallback 必须是合法 HTML 元素 ——
<!-- 备用提示 -->、纯文本、<script></script>都无效 - 移动端 fallback 基本失效，iOS Safari 会直接调起系统 PDF 应用，不走 HTML 流程
真正容易被忽略的是：PDF fallback 的“失败”定义和开发者直觉完全不同 —— 它不覆盖加载超时、渲染卡死、内容加密、权限拒绝等场景，这些情况均无 fallback 可言。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
