object标签可直接预览pdf、图片、纯文本及部分音视频；docx等格式会触发下载或报错，pdf最稳妥，其他类型推荐pdf.js等专用方案。
object 标签能直接预览哪些文件
<object></object> 本身不处理文件解析，它依赖浏览器内置的 MIME 类型处理器或插件（如 PDF 阅读器、Flash 插件等）。现代浏览器中，仅对少数类型有原生支持：application/pdf、image/*、text/plain、部分 audio/* 和 video/*。其他类型（如 DOCX、XLSX、PPTX）会触发下载，或显示“无法加载插件”错误。
常见错误现象：<object data="report.docx"></object> 在 Chrome/Firefox 中空白或报 Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME —— 这是因为浏览器根本不认识 application/vnd.openxmlformats-officedocument.wordprocessingml.document 的渲染方式。
- PDF 文件最稳妥：只要服务端返回正确的
Content-Type: application/pdf，<object></object>就能直接渲染 - 图片建议优先用
<img>；<object></object>渲染图片时 fallback 内容（<param>或子节点）常被忽略，兼容性差 - 文本文件需确保服务端设置
Content-Type: text/plain; charset=utf-8，否则可能乱码或下载
data 属性路径和跨域限制怎么绕
如果 data 指向同源 URL（如 /files/123.pdf），没问题；但指向跨域地址（如 OSS 直链、S3 URL）时，即使 CORS 头齐全，<object></object> 仍可能白屏——这是浏览器安全策略限制：object 不受 crossorigin 属性控制，无法携带凭据，也无法读取跨域响应头来判断 MIME 类型。
- 必须走同源代理：前端请求后端接口（如
/api/preview?url=https://xxx.oss.com/a.pdf），由后端 fetch 并透传响应头和 body - OSS/S3 等对象存储需开启 CORS，并显式允许
Content-Type和X-Response-Time等头（虽然 object 不读它们，但某些网关会拦截） - 绝对避免把用户上传的 raw URL 直接塞进
data——既不安全，又大概率失败
fallback 和错误检测怎么做
<object></object> 的子内容（即 fallback 区域）只在「加载失败」或「不支持该类型」时显示，但它不会区分是网络错误、404 还是 MIME 不匹配。更麻烦的是：Chrome 对 PDF 加载失败时仍会显示空白容器，不触发 fallback。
- 加
<param name="type" value="application/pdf">可辅助识别，但不能解决根本问题 - 监听
onerror事件不可靠（很多情况不触发），推荐用setTimeout+getBoundingClientRect()判断是否渲染出内容区域 - 实用 fallback 方案：子节点放一个
@#@#@#@#@#@#@#@#@#@0，再加一行小字“如未自动打开，请手动下载” - 服务端返回非 200 响应时，
<object></object>不会抛 JS 错误，只能靠接口层提前校验文件是否存在、可访问
比 object 更靠谱的替代方案有哪些
纯前端预览 Office 文档、CAD、Markdown 等，<object></object> 几乎无解。真正落地的方案取决于文件类型：
- PDF：用
pdfjs-dist（Mozilla 官方库），支持分页、缩放、文本选择，完全可控 - Office：调用
Microsoft Graph API的/me/drive/items/{id}/preview，或嵌入 OneDrive/SharePoint 的 iframe 预览链接（需登录态） - 代码/文本：用
highlight.js或prismjs渲染到<pre class="brush:php;toolbar:false;"><code></code>，比 object 更快更稳</pre> - 通用文档（含扫描件）：转成 PDF 后再用 pdf.js；或走后端转换服务（如 LibreOffice headless）
别低估 MIME 类型协商的复杂度——服务端返回的 Content-Type 错一位（比如 applicaton/pdf 拼错），<object></object> 就会静默失败。真要硬上 <object></object>，务必用 curl 或 DevTools Network 面板确认响应头和状态码完全正确。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
