object 标签是 html 标准推荐的通用嵌入方式，支持同源 pdf/xml/svg 预览，需满足同源、content-type 正确、可直接 get 访问三条件，自带降级内容和 typemustmatch 类型校验，但不支持跨域、office 文件及隐藏工具栏。
object 标签能直接预览 PDF、XML、SVG 等同源文档，但不支持跨域加载，也不处理 Office 文件；它依赖浏览器原生能力，不是万能方案，别指望它绕过下载按钮或隐藏工具栏。
为什么用 object 而不是 iframe 或 embed
三者都能加载 PDF，但行为差异明显：iframe 把 PDF 当作独立页面加载，可能触发下载（尤其响应头缺失 Content-Disposition: inline）；embed 语义弱、兼容性差，部分 Safari 版本会静默失败；object 是 HTML 标准推荐的通用嵌入方式，自带降级内容支持，且 typemustmatch 属性可强制校验 MIME 类型匹配，避免类型错配导致白屏。
-
object内容区写 fallback 文本或链接，浏览器不支持时自动显示 - 设置
type="application/pdf"比只靠文件扩展名更可靠 - 若服务端返回的 Content-Type 不是
application/pdf，即使 URL 是 .pdf 也会加载失败
object 加载 PDF 的硬性前提
必须满足全部三个条件，否则大概率白屏或弹下载：
- PDF 文件需与页面同源（协议 + 域名 + 端口完全一致），
file://协议下多数现代浏览器直接拒绝加载 - 服务端响应头中必须包含
Content-Type: application/pdf，不能是text/plain或缺失 - 路径必须可被浏览器直接 GET 访问（比如部署在
/assets/docs/report.pdf，而非后端动态接口且未透传响应头）
常见错误现象：object 显示空白，控制台无报错，Network 面板里该 PDF 请求状态码是 200 但 Initiator 是 other —— 很可能就是 Content-Type 不对。
实际写法与关键参数
最简可用结构如下，注意属性顺序和必需项：
<object data="report.pdf" type="application/pdf" width="800" height="600" typemustmatch> <p>您的浏览器不支持 PDF 嵌入。<a href="report.pdf">点击下载</a></p> </object>
-
data必须是相对或绝对 URL，不能是blob:或data:开头的 Base64 字符串（Chrome 110+ 对blob:支持不稳定，Safari 完全不认） -
typemustmatch是布尔属性，加上它可防止浏览器用错误插件尝试渲染（例如把 PDF 当图片加载） -
width/height推荐设具体值，不设可能导致高度塌陷或滚动条异常 - 内部
<p></p>是降级内容，不是装饰——它只在object渲染失败时显示
它不能做什么，以及替代思路
object 标签做不到的事，强行加 JS 也很难补救：
- 无法禁用 PDF 工具栏里的下载按钮（这是浏览器 PDF 查看器的 UI，前端无权干预）
- 无法预览 DOCX/XLSX —— 浏览器根本不认识
application/vnd.openxmlformats-officedocument.wordprocessingml.document - 无法在跨域场景下工作，哪怕加 CORS 头也没用（PDF 渲染引擎不走 fetch 流程）
真要绕过这些限制，得换技术栈：跨域 PDF 用 iframe 套 Google Docs Viewer；Office 文件走后端转 PDF 或用 PDF.js + 自托管解析服务；需要权限控制就只能在服务端做鉴权并返回带时效的临时链接——object 本身没有安全模型。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
