浏览器GET请求流式下载大文件：寻求类C# copyToAsync的实现方案

我正在开发一个大文件下载服务，前端通过发送GET请求以流的形式接收文件。我了解过Streamsaver.js，但不想使用其中的MITM（中间人）机制。目前我的实现代码如下：

async function downloadFileFromStream(fileName, streamRef) {
    // Get the stream from the .NET stream reference
    const response = await streamRef.stream();
    const readableStream = response.getReader();
    const fileStream = streamSaver.createWriteStream(fileName);

    if (window.WritableStream && readableStream.pipeTo) {
        await readableStream.pipeTo(fileStream);
        return;
    }

    const writer = fileStream.getWriter();
    

    const pump = () => readableStream.read()
        .then(({ done, value }) => {
            if (done) {
                writer.close();
                return;
            }
            return writer.write(value).then(pump);
        });

    await pump();
}

// To register the function in the global window object so it can be called from C#
window.downloadFileFromStream = downloadFileFromStream;

我想知道是否存在类似C#中如下伪代码的实现方式：

Readstream r;
Writestream w;

r.copyToAsync(w);

当然有，现代浏览器原生支持的ReadableStream.pipeTo()方法就能实现类似C# CopyToAsync的简洁流式复制逻辑，完全不需要依赖Streamsaver的MITM机制。以下是几种不同场景的实现方案：

方案1：小文件快速实现（依赖Blob） #

如果文件大小在浏览器内存承载范围内，直接将流转为Blob后触发下载，代码极简：

async function downloadFileFromStream(fileName, streamRef) {
  const response = await streamRef.stream();
  // 一行完成流到Blob的复制，对应C#的CopyToAsync
  const blob = await new Response(response).blob();
  
  const url = URL.createObjectURL(blob);
  const downloadLink = document.createElement('a');
  downloadLink.href = url;
  downloadLink.download = fileName;
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
  URL.revokeObjectURL(url);
}

window.downloadFileFromStream = downloadFileFromStream;

方案2：大文件无内存压力（原生流管道） #

针对超大文件，避免内存占用过高，用原生WritableStream配合流管道实现，全程无内存爆仓风险：

async function downloadFileFromStream(fileName, streamRef) {
  const response = await streamRef.stream();
  const contentType = response.headers.get('Content-Type') || 'application/octet-stream';

  // 自定义可写流，负责收集流片段并最终触发下载
  const writableStream = new WritableStream({
    start() {
      this.chunks = [];
    },
    write(chunk) {
      this.chunks.push(chunk);
    },
    close() {
      const blob = new Blob(this.chunks, { type: contentType });
      const url = URL.createObjectURL(blob);
      const downloadLink = document.createElement('a');
      downloadLink.href = url;
      downloadLink.download = fileName;
      downloadLink.click();
      URL.revokeObjectURL(url);
    },
    abort(err) {
      console.error('下载流终止:', err);
    }
  });

  // 核心：一行完成可读流到可写流的异步复制，完全对应C# CopyToAsync
  await response.body.pipeTo(writableStream);
}

window.downloadFileFromStream = downloadFileFromStream;

方案3：最简原生下载（无需手动处理流） #

如果你的GET请求可以直接指向文件资源地址，甚至不需要手动处理流，直接创建下载标签即可：

function downloadFile(fileName, fileUrl) {
  const downloadLink = document.createElement('a');
  downloadLink.href = fileUrl;
  downloadLink.download = fileName;
  downloadLink.click();
}

关键提示 #

• Chrome 59+、Firefox 57+等现代浏览器都原生支持ReadableStream.pipeTo()，可以完全替代你手动实现的pump函数逻辑，行为和C# CopyToAsync完全一致。
• 若要实现无依赖的大文件流式下载，方案2是最优选择，彻底避开了Streamsaver的MITM代理机制。

内容的提问来源于stack exchange，提问作者Elias Hetland