はるさめ.dev

API から受け取ったファイルを JavaScript でダウンロードする

に公開

背景

API から受け取ったファイル（Uint8Array）を JavaScript でダンロードさせる必要があった。

解決策

// Uint8Array を Blob に変換し、 objectUrl へ
const fileBlob = new Blob([uint8ArrayData]);
const objectUrl = URL.createObjectURL(fileBlob);

// アンカーエレメントを作成してクリックを擬似的にクリックすることでダウンロード
Object.assign(document.createElement("a"), {
    href: objectUrl,
    download: "ファイル名",
}).click();

// objectUrl の後始末
// ドキュメントを閉じるまでメモリに残り続けるので忘れないように
URL.revokeObjectURL(objectUrl);

補足

上位にヒットする記事だとアンカーエレメントを document.body.appendChild() でドキュメントツリーに追加しているものが多く、私もドキュメントツリーに追加する必要があると思っていたのですが、Claude 3 に聞いたところモダンブラウザであれば DOM に追加せずとも動くとのこと。chrome と safari で動作することは確認しましたが、ドキュメントとして明記されているものは見つからなかったです。（逆にドキュメントツリーに追加が必須というドキュメントも見つけられなかった）

コメント