拖拽PDF后需用URL.createObjectURL(file)生成blob URL再赋值给iframe.src，不可直接使用file对象；须校验file.type、监听dragover/drop事件、preventDefault()、及时revokeObjectURL防泄漏，移动端Safari不支持blob URL预览，应降级PDF.js。
拖拽PDF文件后怎么用浏览器原生能力加载
现代浏览器（Chrome 84+、Edge 90+、Firefox 100+）支持直接用 URL.createObjectURL() 把拖入的 File 对象转成可访问的 blob URL，再交给 <iframe></iframe> 或 PDF.js 渲染。但注意：不能直接把 File 对象塞给 <iframe src></iframe>——这会触发下载或报错，必须走 blob URL。
常见错误现象：Failed to load resource: net::ERR_FILE_NOT_FOUND（用了 file:// 路径）、Blocked loading mixed active content（HTTP 页面尝试加载本地 file://）、Refused to display 'file://' in a frame（Safari/Chrome 禁止 iframe 加载本地文件）。
- 拖拽目标元素需监听
dragover和drop事件，并在dragover中调用event.preventDefault()，否则drop不触发 -
drop事件的event.dataTransfer.files是FileList，取第一个files[0]即可（PDF 一般单文件） - 检查
files[0].type是否为"application/pdf"，避免用户误拖其他格式 - 生成 blob URL 后，记得在页面卸载前调用
URL.revokeObjectURL()防内存泄漏
用
部分浏览器（如 Chrome）对 <iframe src="blob:..."></iframe> 渲染 PDF 支持良好；但 Firefox 默认用内置 PDF 查看器，Safari 则可能弹下载或空白。这不是 bug，而是策略差异。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 设置
<iframe></iframe>的width和height（如100vh），并加style="border: none;"消除默认边框 - 不要设
src初始值，等拖拽完成后再赋值，避免空 blob URL 报错 - 如果 iframe 显示为空白，检查控制台是否报
Not allowed to navigate top frame to data URL——说明你误用了data:而非blob: - 移动端 Safari 不支持 blob URL 渲染 PDF，必须降级到 PDF.js
<iframe id="pdf-viewer" width="100%" height="600px" style="border: none;"></iframe>
<script>
document.addEventListener('drop', (e) => {
e.preventDefault();
const file = e.dataTransfer.files[0];
if (!file || file.type !== 'application/pdf') return;
const url = URL.createObjectURL(file);
const iframe = document.getElementById('pdf-viewer');
iframe.src = url;
// 卸载时清理
window.addEventListener('beforeunload', () => URL.revokeObjectURL(url));
});
</script>
什么时候必须上 PDF.js 而不是 iframe
当需要统一跨浏览器行为、支持搜索/文字选择/缩放/页码跳转，或处理加密 PDF、自定义工具栏时，PDF.js 是唯一可靠选择。它的核心是用 Canvas 渲染每一页，完全绕过浏览器原生 PDF 查看器。
关键点：
- 必须用
pdfjsLib.getDocument({ data: arrayBuffer })，而不是传 blob URL 或 file 对象——PDF.js 不识别blob:协议 - 需先用
file.arrayBuffer()读取二进制数据，再传给getDocument() - 加载大 PDF（>20MB）时，
arrayBuffer()会阻塞主线程，建议用Web Worker或分块读取（但 PDF.js 本身不内置分块） - CDN 地址推荐用
https://cdn.jsdelivr.net/npm/pdfjs-dist@3.4.120/build/pdf.min.js（版本号随需更新）
拖拽区域样式与用户体验细节
纯功能实现容易，但用户拖着文件悬停时没反馈，会以为“没反应”。CSS 伪类 :hover 不适用于拖拽态，必须靠 JS 切换 class。
- 监听
dragenter和dragleave，给容器加class="drag-over"，配合 CSS 设置背景色/边框/图标 - 禁止文本被选中：在拖拽区域加
user-select: none - 拖入多个文件？只取第一个，其余忽略——PDF 浏览场景极少需要多文档并排
- 移动端无拖拽，需额外提供
<input type="file" accept=".pdf">作为 fallback
最常被忽略的是 blob URL 生命周期管理：同一个 File 对象多次拖入，会生成多个 URL，但旧的不会自动释放。每次新加载前，先 revoke 上一次的 URL，再生成新的。
