HTML原生不支持拖出文件到桌面，因浏览器安全策略禁止网页向系统写入文件；所谓“拖出”实为视觉模拟+Blob下载组合方案，核心是createObjectURL与a[download]触发下载。
HTML 原生不支持“拖出文件”到桌面或本地文件系统——这是浏览器安全策略硬性限制，dragstart 可以触发，但 dataTransfer.setData() 无法写入真实文件内容，更不能生成可保存的 .zip / .pdf 等物理文件。
为什么拖出文件在浏览器里根本做不到
这不是 API 缺失，而是浏览器主动封禁：所有现代浏览器（Chrome、Firefox、Safari、Edge）都禁止网页向操作系统写入任意文件。你看到的“拖出下载”效果，本质是 download 属性触发另存为对话框，或 a.href + Blob URL 触发浏览器下载流程，用户仍需手动确认保存位置。
-
dataTransfer.effectAllowed = 'copy'或'all'对拖出无效，浏览器直接忽略 -
dataTransfer.files是只读的，且只在“拖入”时有值；拖出时files始终为空 - 试图用
dataTransfer.items.add(new File(...))会报错：NotAllowedError，因为没有权限创建可导出的 File 实例
能模拟“拖出”体验的唯一可行路径
所谓“拖出”，实际是让用户感觉像在拖一个文件离开页面——必须绕过原生拖出限制，改用视觉 + 下载组合方案：
- 监听
dragstart，在event.dataTransfer.setDragImage()中传入一个伪造的 canvas 图标（比如带 ↓ 箭头的文件图标），尺寸控制在 64×64 以内，否则 Safari 会忽略 - 同时立即调用
URL.createObjectURL(new Blob([content], {type: 'text/plain'}))创建临时 Blob URL - 在
dragend后立刻触发location.href = blobUrl或创建隐藏并.click() - 注意：不能等到
drop事件——用户根本不会把东西拖到桌面外，dragend是唯一可靠时机
双向交互的真实含义是“拖入 + 拖出 UI 联动”
所谓双向，不是真能拖进又拖出，而是让拖入和导出操作形成闭环反馈：
- 拖入文件后，解析内容并渲染成结构化卡片（如 JSON 数据预览）
- 给每张卡片加一个
draggable="true"属性，并绑定dragstart，设置dataTransfer.setData('application/json', JSON.stringify(data)) - 目标区域（比如“导出区”div）监听
dragover+preventDefault()，再监听drop——但这里不处理文件，只触发下载逻辑 - 关键点：
drop里不要尝试读dataTransfer.files，而是读dataTransfer.getData('application/json')，再转回 Blob 下载
真正难的不是代码怎么写，而是接受这个事实：浏览器永远不让你静默写磁盘。所有“拖出”都是障眼法，核心永远落在 Blob + URL.createObjectURL + 这个铁三角上，其余全是视觉包装。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
