<object>标签本身不提供文件预览能力，能否预览取决于浏览器是否内置对应MIME类型的处理器及安全策略；加载本地file://文件常因跨源限制失败，需通过HTTP服务访问；PDF是目前最稳定支持的场景，但需满足HTTP服务和浏览器内嵌支持两个前提；其他格式如.docx、.xlsx无原生渲染支持，仅触发下载；图片、音视频应分别使用<img>、<video>/<audio>标签；Office文档需服务端转换或第三方SDK；PDF推荐用pdf.js等库实现可控渲染。
<object> 标签本身不提供“文件预览”能力，它只是浏览器加载外部资源的容器；能否预览，完全取决于浏览器是否内置对应 MIME 类型的处理器（比如 PDF 阅读器、SVG 渲染器），以及目标文件是否可被该处理器安全加载。
为什么 <object> 加载本地文件经常失败
现代浏览器对 file:// 协议有严格限制：直接用 <object data="file:///path/to/doc.pdf"> 会触发跨源策略或拒绝加载，控制台通常报错 Not allowed to load local resource。这不是标签写错了，而是安全模型决定的。
- 开发阶段若用 VS Code Live Server 或
python3 -m http.server启服务，路径必须走http://localhost:8000/xxx.pdf，不能用绝对文件路径 -
type属性不是万能开关——即使写了type="application/pdf"，如果浏览器没 PDF 插件（如 Chrome 已移除 NPAPI 支持），仍会回退到下载或空白 - 某些格式（如 .docx、.xlsx）根本无原生渲染支持，
<object>只会触发下载，不会显示内容
<object> 配合 PDF 的最小可行写法
PDF 是目前最稳定可用的场景，但需满足两个前提：HTTP 服务 + 浏览器支持内嵌 PDF（Chrome/Firefox/Edge 均支持）。
<object data="report.pdf" type="application/pdf" width="100%" height="600px"> <p>您的浏览器不支持 PDF 预览，请 <a href="report.pdf">点击下载</a>。</p> </object>
-
data值必须是相对或绝对 URL，不能是./report.pdf这类不带协议的伪路径（部分浏览器会误解析） -
height推荐设具体像素值，百分比在 flex/grid 容器中可能失效 - 内部
<p>是 fallback 内容，仅当type不匹配或资源加载失败时显示
替代方案比硬扛 <object> 更实际
想预览 Word、Excel、图片甚至视频？别只盯着 <object>。它本质是“交给浏览器处理”，而浏览器能处理的非常有限。
立即学习“前端免费学习笔记（深入）”；
- 图片：直接用
<img src="photo.jpg">，更轻量、可控性强、支持懒加载 - 视频/音频：用
<video>或<audio>，它们专为媒体设计，有播放控件、事件和 API - Office 文档：必须转服务端渲染（如用 LibreOffice 转 PDF）或调用第三方 SDK（如 Microsoft Graph API、OnlyOffice）
- 自定义渲染：前端用 pdf.js（Mozilla 官方库）加载 PDF，完全绕过
<object>的黑盒行为
真正卡住的往往不是怎么写标签，而是没意识到：浏览器对文件类型的“信任清单”极短，且持续缩短。与其反复调试 <object> 的 type 和 data，不如先确认目标文件类型是否在当前浏览器的白名单里——查 navigator.mimeTypes 或直接测试一个已知 PDF 是否能打开，比猜参数有用得多。
