// 🌟 点击下载按钮时触发async function downloadHugeFile() {  try {    // 1. 唤起系统原生的“另存为”对话框，让用户选保存在哪    const fileHandle = await window.showSaveFilePicker({      suggestedName: '2026_system_logs_5GB.zip',    });    // 2. 创建一根通向该文件的“下水管”（可写流）    const writableStream = await fileHandle.createWritable();    // 3. 发起网络请求（完美支持带 Token）    const response = await fetch('/api/download/huge-log', {      headers: {        'Authorization': `Bearer ${localStorage.getItem('token')}`      }    });    if (!response.ok || !response.body) throw new Error('网络异常');    // 4. 🌟 终极魔法：直接把“网络可读流”接入“硬盘可写流”！    // 这一行代码，底层会自动处理背压（Backpressure），内存消耗近乎为 0    await response.body.pipeTo(writableStream);    console.log('✅ 5GB 文件下载并写入硬盘完成！');  } catch (err) {    if (err.name !== 'AbortError') {      console.error('下载失败：', err);    }  }}

<scriptsetuplang="ts">import { ref } from 'vue';const progress = ref(0);const downloadWithProgress = async () => {  const fileHandle = await window.showSaveFilePicker({ suggestedName: 'data.zip' });  const writable = await fileHandle.createWritable();  const response = await fetch('/api/download', {    headers: { 'Authorization': 'Bearer xxx' }  });  // 获取文件总大小 (后端必须配置 Access-Control-Expose-Headers: Content-Length)  const totalLength = Number(response.headers.get('Content-Length')) || 0;  const reader = response.body.getReader();  let receivedLength = 0;  // 🌟 循环：一瓢一瓢地把水舀到硬盘里  while (true) {    const { done, value } = await reader.read();    if (done) {      // 读完了，关掉硬盘写入流      await writable.close();      progress.value = 100;      break;    }    // 将这一瓢水（Uint8Array 切片）写入硬盘    await writable.write(value);    // 更新进度条    receivedLength += value.length;    if (totalLength > 0) {      progress.value = Math.floor((receivedLength / totalLength) * 100);    }  }};</script>

降级架构：

1、前端依然用fetch去拉取流，拿到ReadableStream。

2、我们利用Service Worker创建一个虚拟的 URL（如/download-proxy）。

4、Service Worker 拦截这个请求，把我们前端拿到的那个ReadableStream直接返回给浏览器底层的下载管理器。

这个方案极其巧妙，社区已经有非常成熟的轮子：StreamSaver.js。

在实际企业级开发中，我们通常这样写：

import streamSaver from 'streamsaver';if (window.showSaveFilePicker) {  // 首选：Native API 硬盘直写  useNativeFilePicker(); } else {  // 降级：使用 StreamSaver 处理数据流  const fileStream = streamSaver.createWriteStream('huge_data.zip');  response.body.pipeTo(fileStream);}

结语

从“全量加载到内存”到“基于 Stream 的管道流处理”。