如何修复浏览器blob从maxing RAM下载？_如何从blob URL查看/下载私有blob？_如何在UWP中从WebView下载blob？ - 腾讯云开发者社区

浏览器中的Blob对象是一种表示不可变原始数据的类文件对象。Blob表示的数据不一定是一个JavaScript原生格式。当从服务器请求大量数据并将其作为Blob处理时，可能会遇到内存占用过高的问题，尤其是在下载大文件时。

基础概念

Blob对象用于处理二进制数据，它可以包含的数据类型很广，包括图片、音频、视频、JSON数据等。Blob对象的主要属性包括：

size：Blob对象的大小（以字节为单位）。
type：Blob对象的MIME类型。

问题原因

当下载大文件并将其作为Blob处理时，浏览器会将整个文件加载到内存中，这可能导致内存占用过高，甚至浏览器崩溃。

解决方案

为了避免内存占用过高，可以采用流式下载和处理数据的方法。以下是一些解决方案：

1. 使用Fetch API和ReadableStream

Fetch API提供了对请求和响应流的访问，可以逐步读取数据而不是一次性加载整个文件。

async function downloadFile(url) {
  const response = await fetch(url);
  const reader = response.body.getReader();
  const contentLength = response.headers.get('Content-Length');
  let receivedLength = 0;
  let chunks = [];

  while (true) {
    const { done, value } = await reader.read();
    if (done) {
      break;
    }
    chunks.push(value);
    receivedLength += value.length;
    console.log(`Received ${receivedLength} of ${contentLength}`);
  }

  const blob = new Blob(chunks);
  return blob;
}

downloadFile('https://example.com/largefile.zip')
  .then(blob => {
    console.log('File downloaded');
    // 处理Blob对象
  })
  .catch(error => {
    console.error('Error downloading file:', error);
  });

2. 使用XMLHttpRequest和ProgressEvent

XMLHttpRequest也可以用于逐步下载文件，并通过ProgressEvent监控下载进度。

function downloadFile(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'blob';

    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(xhr.response);
      } else {
        reject(new Error(`Failed to download file: ${xhr.statusText}`));
      }
    };

    xhr.onerror = () => {
      reject(new Error('Network error'));
    };

    xhr.send();
  });
}

downloadFile('https://example.com/largefile.zip')
  .then(blob => {
    console.log('File downloaded');
    // 处理Blob对象
  })
  .catch(error => {
    console.error('Error downloading file:', error);
  });