← カテゴリ一覧に戻る

ダウンロードリンク

a download

download 属性を付けた<a> タグは、 リンク先URLをブラウザで開かずにファイルとしてダウンロードさせる。 属性値でダウンロード時のファイル名を指定できる。

デモ：ダウンロードリンク

以下のリンクをクリックするとファイルがダウンロードされます（data URI を使用）。

test.txt をダウンロードhref="data:text/plain,Hello World" download="test.txt"
users.csv をダウンロードdownload="users.csv"
ファイル名なし（属性値省略）download（値を省略→URLのファイル名を使用）

基本的なコード例

<!-- ファイル名を指定してダウンロード -->
<a href="data:text/plain,Hello World" download="test.txt">
  test.txt をダウンロード
</a>

<!-- URLのファイル名をそのまま使う（値を省略） -->
<a href="/files/report.pdf" download>
  レポートをダウンロード
</a>

<!-- ファイル名を上書きして別名でダウンロード -->
<a href="/api/export?format=csv" download="export-2024.csv">
  CSV エクスポート
</a>

download 属性によるファイル名の上書き

download 属性に値を指定すると、 サーバーが返すファイル名や URL のパスに関わらず、指定した名前でダウンロードされます。 動的に生成されるファイルや、URLが意味のない名前のAPIエンドポイントに対して特に有効です。

hrefdownload 属性実際のファイル名
/api/reportdownload="monthly.pdf"monthly.pdf
/files/abc123.bindownload="data.zip"data.zip
/image.pngdownload（値なし）image.png（URLから取得）

クロスオリジン制限

download 属性は同一オリジン (same-origin) の URL にのみ有効です。 異なるオリジンの URL に対しては download 属性は無視され、 通常のリンクとして動作します（ブラウザでそのまま開かれる）。

<!-- 同一オリジン → download が有効 -->
<a href="/files/report.pdf" download="report.pdf">ダウンロード</a>

<!-- 別オリジン → download は無視される（ブラウザで開かれる） -->
<a href="https://other-domain.com/file.pdf" download="file.pdf">
  ※ download 属性は効かない
</a>

<!-- data URI / blob URL → オリジン制限なし（常に有効） -->
<a href="data:text/plain,content" download="file.txt">OK</a>
<a href="blob:https://example.com/..." download="file.txt">OK</a>

注意： CDN や外部ストレージ（S3 など）からファイルをダウンロードさせたい場合は、 サーバーサイドでプロキシ経由でファイルを返すか、Content-Disposition: attachment ヘッダーをサーバー側で設定する必要があります。

比較：download 属性 vs Content-Disposition ヘッダー

ダウンロードを制御する方法は2つあります。HTML の download 属性と、 サーバーが返す Content-Disposition レスポンスヘッダーです。

項目download 属性Content-Disposition ヘッダー
設定場所HTML（クライアントサイド）サーバーレスポンス
クロスオリジン❌ 同一オリジンのみ有効✅ オリジン問わず有効
ファイル名指定属性値で指定filename= パラメータで指定
サーバー不要✅ 静的HTMLのみで可能❌ サーバー設定が必要
強制ダウンロード同一オリジンの場合のみ✅ 常に強制可能
# Content-Disposition ヘッダーの例（サーバーサイド）

# インライン表示（ブラウザで開く）
Content-Disposition: inline

# 添付ファイルとしてダウンロードさせる
Content-Disposition: attachment; filename="report.pdf"

# 日本語ファイル名（RFC 5987 エンコーディング）
Content-Disposition: attachment; filename*=UTF-8''%E3%83%AC%E3%83%9D%E3%83%BC%E3%83%88.pdf

TipsJavaScript で動的にファイルをダウンロードする

JavaScript で生成したデータを Blob URL に変換して download 属性と組み合わせることで、 クライアントサイドだけでファイル生成＆ダウンロードを実現できます。

// JavaScript でデータを生成してダウンロードする
function downloadAsFile(content, filename, mimeType = 'text/plain') {
  const blob = new Blob([content], { type: mimeType });
  const url  = URL.createObjectURL(blob);

  const a = document.createElement('a');
  a.href     = url;
  a.download = filename;
  a.click();

  // メモリ解放
  URL.revokeObjectURL(url);
}

// 使用例
downloadAsFile('Hello, World!', 'hello.txt');
downloadAsFile(JSON.stringify(data, null, 2), 'data.json', 'application/json');

// CSV エクスポートの例
const csv = [
  ['name', 'age'],
  ['Alice', 30],
  ['Bob',   25],
].map(row => row.join(',')).join('\n');

downloadAsFile(csv, 'users.csv', 'text/csv');

まとめ

ポイント詳細
基本構文<a href="url" download="filename">
ファイル名省略download のみ記述 → URLのファイル名を使用
クロスオリジン同一オリジン・data URI・Blob URL のみ有効
サーバーサイド代替Content-Disposition: attachment ヘッダー
動的生成Blob URL + JS で任意のデータをダウンロード可能

🤖 AIプロンプトテンプレート

以下の要件を満たす、`<a href download>` を使ったファイルダウンロードリンクのHTML・CSSサンプルを作成してください。

- `download` 属性でファイル名を指定するダウンロードリンクを実装すること
- PDF・画像・CSVなど複数のファイル形式の例を含めること
- ファイルサイズや形式を視覚的に示すUIデザインを実装すること
- 同一オリジンのリソースでのみ `download` が動作する制約を示すこと
- アイコンや `aria-label` を使ったアクセシブルなダウンロードボタンも示すこと

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo