コンテンツにスキップ

ファイルダウンロード

ファイルダウンロードはFetch APIを使用して取得したデータをJavaScriptを用いてダウンロードさせます。

バックエンドではダウンロードさせたいデータをレスポンスボディに設定します。 REST API設計でも述べた通り、ファイルダウンロードではJSONに限らず任意のフォーマットを用いてデータを送信します。

URLをブラウザで直接開いてダウンロードさせる方式ではないため、Content-Dispositionヘッダの付与は任意とします。

フロントエンドではファイルデータを含むHTTPレスポンスを取得すると、ファイルデータからBlobオブジェクトを作成し、そのBlobオブジェクトを表すURIを生成します。 そしてa要素を動的に生成し、href属性へBlobオブジェクトを表すURIを、download属性へファイル名をそれぞれ設定し、clickメソッドを実行してダウンロードさせます。

Note

メモリリーク回避のため、生成したBlobオブジェクトを表すURIとa要素は使い終わったら破棄するようにします。


※ このドキュメントはFintan コンテンツ 使用許諾条項の下に提供されています。

※ このドキュメントに記載されている会社名、製品名は、各社の登録商標または商標です。