JavaScriptでBlobをダウンロードする方法

方法1: リンクを作成してダウンロード 最も基本的な方法は、BlobのURLを作成し、リンクを作成してダウンロードすることです。以下は例です。

function downloadBlob(blob, fileName) {
  const url = window.URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = fileName;
  link.click();
  window.URL.revokeObjectURL(url);
}
// 使用例
const data = new Blob(['Hello, World!'], { type: 'text/plain' });
downloadBlob(data, 'example.txt');

方法2: FileSaver.jsライブラリを使用する FileSaver.jsは、Blobを簡単にダウンロードするためのライブラリです。以下は使用例です。

1. FileSaver.jsをインストールします。

npm install file-saver

2. JavaScriptファイルに以下のコードを追加します。

import { saveAs } from 'file-saver';
// 使用例
const data = new Blob(['Hello, World!'], { type: 'text/plain' });
saveAs(data, 'example.txt');

方法3: XMLHttpRequestを使用してダウンロード XMLHttpRequestを使用してBlobをダウンロードすることもできます。以下は例です。

function downloadBlobWithXHR(blob, fileName) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', window.URL.createObjectURL(blob), true);
  xhr.responseType = 'blob';
  xhr.onload = function() {
    if (xhr.status === 200) {
      const blob = xhr.response;
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = fileName;
      link.click();
      window.URL.revokeObjectURL(url);
    }
  };
  xhr.send();
}
// 使用例
const data = new Blob(['Hello, World!'], { type: 'text/plain' });
downloadBlobWithXHR(data, 'example.txt');