Blob与Fetch下载解析二进制文件教程

async function downloadFile(url, filename) {
  const res = await fetch(url);
  const blob = await res.blob();
  const urlObj = URL.createObjectURL(blob);
  
  const a = document.createElement('a');
  a.href = urlObj;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  
  document.body.removeChild(a);
  URL.revokeObjectURL(urlObj); // ⚠️ 必须释放
}

解析 Blob 内容（如读取图片尺寸、PDF 元信息等）

Blob 本身不可直接读取内容，需转为更底层的格式：

• blob.arrayBuffer() → 得到 ArrayBuffer，适合解析二进制结构（如 PNG 头、ZIP 目录、PDF 版本号）
• new FileReader().readAsArrayBuffer(blob) → 兼容性更好，适用于需要回调的旧环境
• 对图像类 Blob，也可用 URL.createObjectURL(blob) + 加载后读取 naturalWidth/naturalHeight

读取 PNG 宽高的简单示例（基于前 24 字节）：

async function getPngSize(blob) {
  const buf = await blob.arrayBuffer();
  const view = new DataView(buf);
  if (view.getUint32(0) !== 0x89504e47) return null; // PNG signature
  const width = view.getUint32(16);
  const height = view.getUint32(20);
  return { width, height };
}

注意事项与常见问题

CORS 是最大拦路虎 —— 若目标服务器未设置 Access-Control-Allow-Origin，fetch 会失败。此时无法绕过（除非服务端配合或使用代理）。

• 大文件建议加 loading 状态，Blob 构建本身不耗时，但网络和解析可能卡顿
• 部分浏览器对 download 属性有策略限制（如跨域链接、非用户手势触发），优先在点击事件中调用下载逻辑
• Blob 是只读引用，修改内容需重新构造，例如裁剪图片需先解码再编码为新 Blob

本篇关于《Blob与Fetch下载解析二进制文件教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！