JavaScript 中怎么使用 Fetch API 实现断点下载的文件保存-js教程-PHP中文网

fetch api 本身不直接支持断点下载，但可通过 range 请求头与服务端配合实现分段下载、拼接保存：需先验证服务端支持 accept-ranges，再用 head 获取总大小并分块请求，最后用 uint8array 手动合并 arraybuffer 并触发下载。

javascript 中怎么使用 fetch api 实现断点下载的文件保存

Fetch API 本身不直接支持“断点下载”（即暂停/恢复下载），但可以通过 Range 请求头 和服务端配合，实现分段下载、拼接保存。关键在于：客户端控制请求范围，服务端返回对应字节流，前端将多段 Blob 合并为完整文件。

1. 确认服务端支持 Range 请求

断点下载依赖 HTTP 的 Range 和 206 Partial Content 响应。先检查服务端是否支持：

发送一个带 Range: bytes=0-1023 的 HEAD 请求
查看响应头是否含 Accept-Ranges: bytes 或 Content-Range
若返回 206 且有 Content-Range（如 bytes 0-1023/1048576），说明支持

2. 获取文件总大小并分块请求

先发一次 HEAD 请求拿到文件总长度，再按需分段（如每段 1MB）发起多个 Fetch 请求：

async function getFileSize(url) {
  const res = await fetch(url, { method: 'HEAD' });
  return parseInt(res.headers.get('content-length')) || 0;
}

async function downloadChunk(url, start, end) {
  const res = await fetch(url, {
    headers: { 'Range': `bytes=${start}-${end}` }
  });
  if (res.status !== 206) throw new Error(`Expected 206, got ${res.status}`);
  return await res.blob();
}

3. 合并多个 Blob 并保存为文件

用 Uint8Array 手动拼接各段二进制数据（注意：不能直接用 new Blob([blob1, blob2])，那样会生成包含两个 Blob 对象的嵌套结构，而非连续字节）：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

用 blob.arrayBuffer() 转为 ArrayBuffer
用 Uint8Array 拷贝到同一块内存中
最后用 new Blob([mergedBuffer], {type: 'application/octet-stream'}) 创建完整文件

示例合并逻辑：

async function mergeBlobs(blobs, totalSize) {
  const merged = new Uint8Array(totalSize);
  let offset = 0;
  for (const blob of blobs) {
    const arr = new Uint8Array(await blob.arrayBuffer());
    merged.set(arr, offset);
    offset += arr.length;
  }
  return new Blob([merged.buffer], { type: 'application/octet-stream' });
}

4. 触发浏览器下载

合并完成后，用 URL.createObjectURL() 创建临时链接并模拟点击下载：

function saveBlob(blob, filename) {
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url); // 及时释放
}

不复杂但容易忽略：服务端必须正确处理 Range、返回 206、设置 Content-Range；前端需严格按字节偏移拼接，不能依赖 Blob 自动合并。