data属性路径解析依赖html文档url而非文件系统，相对路径如"data='report.pdf'"会相对于当前页面url请求；type仅作提示，实际渲染取决于服务端content-type响应头；fallback仅在资源加载成功但无法渲染时生效。
data属性路径是否解析正确
浏览器对 data 的解析完全依赖当前 HTML 文档的 URL，不是文件系统位置。比如页面地址是 http://localhost:8080/admin/index.html，data="report.pdf" 就会请求 /admin/report.pdf，而不是根目录下的 /report.pdf。容易踩的坑包括：
- 写成
data="./report.pdf"却忘了当前 HTML 本身在子目录里，导致多了一层./ - 本地用
file://协议打开时，相对路径行为不一致（Firefox 会按文件系统路径解析，Chrome 可能静默失败） - 构建工具（如 Vite、Webpack）重写了静态资源路径，但
data字符串没同步更新
验证方法：打开开发者工具 → Network 面板 → 刷新页面 → 找到对应请求，看发起的 URL 是不是你预期的那个地址。
type值与服务端Content-Type是否匹配
type 属性只是提示，真正起效的是 HTTP 响应头里的 Content-Type。即使 type="application/pdf" 写得完全正确，只要服务器返回 Content-Type: text/plain，Chrome 就会下载文件，而不是内嵌显示。
- PDF 场景必须三者一致：
data可访问 +type="application/pdf"+ 响应头含Content-Type: application/pdf - SVG 或 JSON 等资源，
type错写成image/svg（缺+xml）通常不影响加载，但某些旧环境可能 fallback - 本地开发建议用
http://localhost启服务，避免file://下 Content-Type 不可控
fallback内容为何没显示
很多人以为 data 404 就一定触发 fallback，其实不是。fallback 只在「资源成功加载但无法渲染」时才激活。常见误判点：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
data值为空、非法 URL（如data=""或data=" "）→ 浏览器根本不发请求，也不显示 fallback - 请求发出但被 CORS 阻断 → 控制台报错，但 fallback 不渲染（跨域响应未到达解析阶段）
- PDF 查看器被禁用或缺失 → 加载成功且响应头正确，但浏览器主动退到 fallback
- 没设
width和height→ 渲染区域为 0×0，看起来像“白屏”，实际 fallback 已加载但不可见
可靠做法是加内联样式：style="width:100%; height:600px;"，比 CSS 类更优先，也更容易调试。
为什么用了<param>却没效果
<param> 在现代浏览器中基本失效，尤其对 PDF 和 SVG 这类内置处理器支持的类型。它只在旧式插件链路（Flash/Java）中起作用，而这些已被 Chrome v45+、Firefox v52+ 全面移除。
-
<param name="src" value="doc.pdf">对 PDF 完全无用，浏览器根本不读取 - 不要指望
<param>传递宽高、缩放或自动播放参数——这些该用width/height属性或 JS 控制 - 如果必须兼容极老系统（如 IE11 + ActiveX），才需保留
<param>；否则删掉更干净
真正影响渲染的只有三个东西：data（是否发起请求）、响应头（是否允许渲染）、尺寸（是否可见）。其他都是历史包袱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
