浏览器无法直接写入本地硬盘，需通过filesystem access api（推荐，支持真流式）或blob下载（兼容降级）实现；前者需用户授权且仅chromium 102+支持，后者需注意内存控制。
目前浏览器环境无法直接将数据写入用户本地硬盘任意路径，这是出于安全限制。WritableStream 本身是 Web API 的一部分，但它在标准浏览器中只能配合 FileSystem Access API（需用户主动授权）或 下载触发方式（如 `a[download]` + Blob URL）来实现“保存到本地”，且不支持后台静默写入。
使用 FileSystem Access API 实现流式写入（推荐，支持真正流式）
这是目前唯一能让网页持续、分块写入用户选定文件的现代方案，需用户首次点击授权，之后可复用句柄：
- 调用
navigator.storage.getDirectory()或window.showSaveFilePicker()获取一个FileSystemFileHandle - 用
fileHandle.createWritable()创建WritableStream实例，返回可写流 - 将你的数据源（如生成器、fetch 响应 body、TransformStream 输出）通过
.pipeTo(writable)或逐块writable.write(chunk)写入 - 最后调用
writable.close()完成保存
✅ 优势：支持 GB 级数据分块写入，内存占用低，不依赖 Blob 构建；❌ 限制：仅 Chromium 102+（Chrome/Edge）、仅 HTTPS 环境、必须用户主动触发（如点击按钮）。
用 Blob + URL.createObjectURL 模拟流式下载（兼容性更好）
当目标浏览器不支持 FileSystem Access API 时，可用此降级方案——虽非真“流式写入硬盘”，但能避免内存爆炸：
- 创建
new WritableStream({ write: chunk => chunks.push(chunk) })收集分块（注意控制 chunk 数量，防 OOM） - 或更稳妥地：用
TransformStream将数据流转为ReadableStream，再用new Response(stream).blob()获取 Blob（现代浏览器支持流式 blob 构建） - 生成 Blob URL：
const url = URL.createObjectURL(blob) - 创建隐藏链接并触发下载：
@#@#@#@#@#@#@#@#@#@0→link.click()
⚠️ 注意：Blob 构建过程仍需完整读取流（除非浏览器已优化），大文件可能卡顿；建议搭配进度提示与取消机制。
关键细节与避坑提醒
无论哪种方式，以下几点直接影响成败：
-
不要尝试绕过用户手势：
showSaveFilePicker和createWritable必须在 click、keydown 等可信事件处理函数内调用，否则抛出异常 -
及时 abort 可写流：若生成数据中途出错或用户取消，调用
writable.abort(error)避免残留未关闭句柄 -
二进制数据务必用 Uint8Array：WritableStream 默认只接受
Uint8Array，字符串需先编码：new TextEncoder().encode(str) - 避免长时间阻塞主线程：大量小 chunk 频繁 write 可能引发性能问题，建议每 64–256 KB 合并一次再写
简单示例：点击后流式保存随机字节流
以下代码片段演示核心流程（省略错误处理）：
async function saveDataStream() {
const handle = await window.showSaveFilePicker({
types: [{ description: 'Binary Data', accept: { 'application/octet-stream': ['.bin'] }}]
});
const writable = await handle.createWritable();
<p>// 模拟海量数据生成器
async function* generateBytes() {
for (let i = 0; i setTimeout(r, 0)); // 让出微任务队列
}
}</p><p>await ReadableStream.from(generateBytes()).pipeTo(writable);
}</p>
用户点击一次，即可边生成、边写入、边保存，全程内存占用稳定在 ~128KB 左右。
