【JavaScript】指定したURLとファイル名でクライアント側でダウンロード処理

概要

フロントエンド側で何かしらファイルのダウンロードを行わせたい場合は、普通にaタグを設置するケースが大半と思います。ただ、中にはアップロードされたファイル名を、そのまま見せたくないというケースもあるかなと感じあます。
今回は、クライアント側でファイルのURLとファイル名を指定して、ダウンロード処理をさせる実装を紹介します。

対応

Download files in front end — Vueの記事が参考になります。一度blobでURLからファイルした後に、擬似的にaタグを設定してクリック処理を行う流れです。なお、記事はVueとなっていますが、JavaScriptの機能で実現できます。

実装サンプル

ほぼ上記の記事そのままですが、ダウンロード処理を行う関数の実装サンプルを、のせておきます。

async function fileDownloadFromUrl(fileName, fileUrl) {
  const response = await fetch(fileUrl);
  const blob = await response.blob();
  const newBlob = new Blob([blob]);
  const objUrl = window.URL.createObjectURL(newBlob);
  const link = document.createElement("a");
  link.href = objUrl;
  link.download = fileName;
  link.click();
  // For Firefox it is necessary to delay revoking the ObjectURL.
  setTimeout(() => {
    window.URL.revokeObjectURL(objUrl);
  }, 250);
}