pdf在iframe中不显示，主因是浏览器对application/pdf的mime类型默认不内嵌渲染，而是触发下载或调用内置查看器，而iframe不支持该行为；同时需检查base标签是否导致路径解析错误，正确做法是用url构造绝对路径、服务端加content-disposition:inline响应头，或改用pdf.js。
PDF在iframe中不显示，先看控制台报错类型
常见现象是<iframe src="doc.pdf"></iframe>空白，控制台出现 Resource interpreted as Document but transferred with MIME type application/pdf。这不是<base>导致的，而是浏览器策略：当Content-Type为application/pdf时，现代 Chrome/Firefox 默认**不内嵌渲染**，而是触发下载或用内置 PDF 查看器打开——但 iframe 不支持该行为，所以留空。
base href写错会让PDF路径直接404，且无提示
如果<iframe src="doc.pdf"></iframe>连请求都没发出去，或者Network里显示404，大概率是<base href>值非法，导致相对路径解析失败：
-
<base href="dist/">→ 静默失效，doc.pdf被解析为当前页面 URL 同级路径，而非/dist/doc.pdf -
<base href="/preview">→ 缺末尾/，Firefox会拼成/previewdoc.pdf（不是/preview/doc.pdf） -
<base href="../assets/">→ 含..，规范禁止，整条标签被丢弃 - 正确写法只有两种：
<base href="/preview/">或<base href="https://cdn.example.com/pdf/">
PDF预览必须绕过base影响的三种可行方式
<base>只改 HTML 属性里的相对路径，对 JS 行为完全无效。所以预览逻辑要主动脱离它：
- 用
URL构造绝对路径：const pdfUrl = new URL('doc.pdf', document.baseURI).href，再赋给iframe.src - 服务端返回 PDF 时强制加
Content-Disposition: inline响应头，部分浏览器会允许 iframe 渲染 - 彻底放弃 iframe，改用
pdf.js：它的viewer.html?file=参数接收的是**完整 URL**，不受<base>干扰，例如/static/pdf/web/viewer.html?file=/preview/doc.pdf
Vue/React项目里最容易忽略的耦合点
单页应用中，<base href="/subapp/">和路由 base、构建工具配置三者必须一致，否则 PDF 路径和跳转路径会割裂：
- Webpack：
publicPath: '/subapp/'和<base href="/subapp/">重复 → 资源路径变成/subapp//subapp/doc.pdf - Vite：
base: '/subapp/'已生效，HTML 中再写<base>→ 叠加生效，风险翻倍 - Vue Router：
createWebHistory('/subapp/')没配，但<base>写了 →fetch('./api')走/subapp/api，而router.push('/home')跳到根路径，白屏
真正安全的做法是：构建工具配base后，HTML 中**不手动写<base>标签**，所有资源路径由打包器统一 resolve，PDF 预览 URL 也走绝对路径或document.baseURI动态计算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
