不能。现代浏览器禁止 iframe 直接加载 file:// 路径，需通过 FileReader 读取用户选择的文件并生成 Blob URL 赋值给 src；仅支持 PDF、图片、HTML 等原生可渲染格式，且须正确设置 MIME 类型与读取方式。
iframe 能直接加载本地 file:// 路径吗？
不能。现代浏览器出于安全限制，iframe 的 src 属性无法直接指向 file:// 本地路径（比如 file:///Users/xxx/resume.pdf），会触发跨域错误或直接空白，控制台通常报 Not allowed to load local resource。
用 FileReader + Blob URL 替代 src 属性
必须绕过直接写路径的思路，把文件读成二进制后生成临时内存 URL，再赋给 iframe.src。这是唯一可靠且兼容主流浏览器的方式。
- 只支持用户通过
<input type="file">显式选择的文件，不能自动读取任意本地路径 - 读取成功后调用
URL.createObjectURL(file)，返回一个以blob:开头的临时地址 - 该 URL 仅在当前页面生命周期内有效，页面关闭后失效；不用时建议手动调用
URL.revokeObjectURL()释放内存 - 对 PDF、图片、HTML 等浏览器原生支持渲染的格式有效；纯文本或 Word 文件不会渲染，需额外处理
const input = document.querySelector('input[type="file"]');
const iframe = document.querySelector('iframe');
input.addEventListener('change', (e) => {
const file = e.target.files[0];
if (!file) return;
const url = URL.createObjectURL(file);
iframe.src = url;
// 清理：切换文件时释放前一个 URL
iframe.addEventListener('load', () => {
if (iframe._prevUrl) URL.revokeObjectURL(iframe._prevUrl);
iframe._prevUrl = url;
}, { once: true });
});
PDF 预览常见失败原因
即使用了 Blob URL，PDF 在 iframe 中仍可能空白或报错，主要因为：
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
- 某些浏览器（如 Safari）对
application/pdfMIME 类型的 Blob URL 支持不稳定，可尝试显式设置type属性：new Blob([arrayBuffer], { type: 'application/pdf' }) - Chrome 95+ 默认禁用 PDF 插件式渲染，若 iframe 内显示“PDF 损坏”或白屏，检查是否误将 PDF 当作文本读取 — 必须用
readAsArrayBuffer()，而非readAsText() - 部分企业内网环境启用了 PDF 下载策略，会拦截 inline 渲染，此时
iframe会触发下载而非预览
不推荐用 iframe 预览非标准格式
像 DOCX、XLSX、TXT 这类文件，浏览器没有内置渲染能力，iframe 只会触发下载或显示乱码。如果业务真需要预览这些格式：
立即学习“前端免费学习笔记（深入）”；
- TXT：改用
<pre>+FileReader.readAsText()，更轻量可控 - DOCX/XLSX：必须借助第三方库（如
docx-preview或SheetJS）解析后渲染到 DOM，不能依赖iframe - 视频/音频：虽然
iframe能加载，但语义错误 — 应用<video>或<audio>标签，它们才支持播放控制与事件
真正关键的不是“能不能塞进 iframe”，而是“浏览器是否具备原生渲染该类型的能力”。这点容易被忽略，结果卡在奇怪的白屏上很久。
