网页无法直接保存文件到用户本地磁盘，因浏览器安全限制仅允许通过a.download触发用户确认的下载流程；需用File.arrayBuffer()读取后构造Blob，再通过URL.createObjectURL()生成临时链接下载。
网页无法直接“保存文件到用户本地磁盘”——这是浏览器安全模型的硬性限制，drop 事件拿到的 File 对象只能读取或上传，不能绕过用户授权写入任意路径。
为什么 drop 后调用 writeAsFile() 会报错
常见误区是以为能像 Electron 或桌面应用一样调用类似 writeAsFile()、fs.writeFile() 的 API。但纯网页环境没有文件系统写入权限，所有涉及“保存”的操作必须显式触发下载流程，由用户确认保存位置。
- 浏览器禁止脚本静默写盘，否则任意网站都能覆盖用户桌面或文档目录
-
event.dataTransfer.files是只读FileList，内容驻留在内存/临时沙盒中，关掉标签页即释放 - 所谓“拖拽保存”，实际是“拖拽后触发下载”，本质仍是
a.download+URL.createObjectURL()组合
如何让拖进来的文件“一键下载回本地”
用户拖一个 PDF 进来，你想让它立刻弹出保存对话框？可行，但需两步：先读取原始二进制（用 File.arrayBuffer()），再构造 Blob 触发下载。注意：不能直接用原 File 对象设 a.href，否则下载名丢失或变成随机字符串。
实操建议：
- 从
event.dataTransfer.files[0]取出文件，检查file.name和file.type是否可信（避免拖来 .exe 却当成 txt 下载） - 调用
file.arrayBuffer()获取底层字节，然后new Blob([buffer], { type: file.type })重建 Blob - 用
URL.createObjectURL(blob)生成临时 URL，赋给标签的href，并设download属性为file.name - 自动点击该链接：
link.click()，随后立即URL.revokeObjectURL(url)清理内存
示例关键代码：
dropZone.addEventListener('drop', async (e) => {
e.preventDefault();
const file = e.dataTransfer.files[0];
if (!file) return;
const buffer = await file.arrayBuffer();
const blob = new Blob([buffer], { type: file.type });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = file.name; // 保留原始文件名
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
});
拖拽区域同时支持上传和下载时的坑
同一个 drop 区域若既想上传又想“保存回本地”，必须明确区分用户意图。光靠拖拽动作无法判断——用户拖进来，到底是“传给服务器”还是“存到自己电脑”？不能默认二选一。
- 不要在
drop后自动执行下载：这会干扰真正想上传的用户，尤其多文件场景下更混乱 - 推荐方案：drop 后只做预览+校验，加两个按钮——“上传到服务器”和“下载到本地”，由用户显式选择
- 若坚持单操作，至少加一次确认：
if (confirm(`确定要下载 ${file.name} 吗？`)) { ... } - 大文件（>100MB）慎用
arrayBuffer()：可能触发内存警告或卡死，此时应改用fetch(file.url)（仅限同源）或放弃下载走上传流式处理
真正难的不是技术实现，而是理解浏览器的权限边界：拖拽进来的是“可读数据”，不是“可写句柄”。所有看似“保存”的操作，本质都是诱导用户主动点击下载——这个交互链路不能跳过，也绕不开。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
