More than 1 year has passed since last update.

【覚書き】ブラウザでファイルダウンロードさせるためのAPIレスポンスの設定

Last updated at 2023-12-24Posted at 2023-12-23

初めに

あるファイルをAPIレスポンスとして返す際、そのファイルをダウンロードしたい時があると思います。今回はその際に必要なAPIレスポンスの設定を調べたので、備忘を兼ねてアウトプットします。

※使用したブラウザはGoogle Chromeです。

レスポンスヘッダに以下のヘッダーをつければOKです。
ダウンロードするファイルはContentに設定してください。

ヘッダー項目	設定値	備考
Content-Disposition	attachment; filename=[ダウンロードするファイル名]
Content-Type	ファイルの形式に合わせて設定例）application/octet-streamなど	※1
Access-Control-Allow-Origin	ダウンロード先サーバのオリジン	※2

※1：なくても一応ダウンロード可能。
※2：APIとダウンロード先のサーバが違う場合は必須。同じ場合は不要。

それぞれの設定について解説します。

ファイルをWebページとして表示させるか、ダウンロードするかどうかを設定する項目です。
今回はattachment; filename=[ファイル名]を指定してダウンロードします。

返したいファイルの形式を指定します。
一般的なものは以下です。
※指定しなくてもなくても一応ダウンロードはできるようです。

Content-Type	説明
text/plain	プレーンテキスト
text/html	HTMLドキュメント
application/json	JSON形式のデータ
application/xml	XML形式のデータ
application/x-www-form-urlencoded	HTMLフォームで使用される標準のエンコード形式
multipart/form-data	フォームデータのマルチパートエンコード
application/octet-stream	バイナリデータ
image/jpeg	JPEG画像
image/png	PNG画像
application/pdf	PDFドキュメント
application/zip	ZIPアーカイブ
application/vnd.ms-excel	Microsoft Excelスプレッドシート
application/vnd.ms-word	Microsoft Wordドキュメント
audio/mpeg	MPEGオーディオ
video/mp4	MP4ビデオ

APIとダウンロード先のサーバが異なる場合、ブラウザによってはCORSで処理がうまくいかない場合があります。
その場合、ヘッダーの値でダウンロードファイルが存在するサーバのOriginを指定する必要があるようです。
※自分の場合は同じサーバ内だったため指定は不要でした。

CORSについては以下参照

普段フレームワークを使ってるとそんなに意識せずに実装できてましたが、改めて調べてみるとこんな仕組みになっているんだと知ることができて面白かったです。
今回した実装も今度書く予定です（多分）。

ご覧いただきありがとうございました！