過去バージョン

download 属性とは

要素の download 属性は、リンク先をブラウザで開かずにダウンロードして保存させるための属性です。PDF や画像のようにブラウザが普段ビューアで表示してしまうファイルを、確実に「保存」として扱わせたい場合に使います。

マニュアルをダウンロード

2. ファイル名を指定する

  マニュアルをダウンロード

サーバ上のハッシュ付きファイル名を、ユーザーが見やすい名前で保存させる典型パターンです。

使えるケース・使えないケース

同一オリジンまたは blob: / data: URL のときだけ有効です。クロスオリジンの URL では、ブラウザは安全のため download を無視します（通常のリンクとして開く）。

ファイル名指定の挙動

• download のみ → サーバ側のファイル名（URL 末尾）で保存
• download="name.ext" → その名前で保存
• サーバ側で Content-Disposition: attachment; filename="..." がある場合、サーバ側が優先される実装が多い
• 拡張子は自動補完されない（download="data" なら拡張子なし）
• OS で使えない文字（/ や : など）は自動でアンダースコア等に置換される

典型的なユースケース

PDF を「表示」ではなく「保存」させる

ブラウザは PDF をビューアで開いてしまうことが多いですが、download を付けると保存ダイアログが出ます。

レポートをダウンロード

画像を保存させる

右クリックして保存しなくても、ボタン感覚でダウンロードできます。

  写真を保存

JS で生成したテキストを保存する

Blob を URL.createObjectURL で URL 化し、それを download 付きリンクとしてクリックします。CSV / JSON / ログ出力でよく使う定番パターンです。

function downloadText(filename, text) {
  const blob = new Blob([text], { type: "text/plain;charset=utf-8" });
  const url = URL.createObjectURL(blob);

  const a = document.createElement("a");
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  a.remove();
  URL.revokeObjectURL(url);   // メモリ解放
}

// CSV をダウンロード
downloadText("data.csv", "name,age\nAlice,30\nBob,25");

data: URL で小さなファイルを保存する

  hello.txt をダウンロード

サーバ側からも強制ダウンロードする

クロスオリジンや確実性が求められる場面では、サーバ側のレスポンスヘッダでダウンロード扱いにします。HTML だけに頼るより堅実です。

Content-Disposition: attachment; filename="report.pdf"
Content-Type: application/pdf

PHP の例：

header('Content-Type: application/pdf');
header('Content-Disposition: attachment; filename="report.pdf"');
readfile('/var/files/report.pdf');

ブラウザ対応状況

• Chrome / Edge / Firefox / Safari ともに対応（モダンブラウザ）
• iOS Safari は仕様上の制約で挙動が独特 — ファイルが新しいタブで開いてしまうケースがある
• クロスオリジン URL は前述のとおりすべてのブラウザで無視される

セキュリティ上の注意

• ユーザー入力の値を download に直接埋めない — 拡張子偽装などの攻撃に繋がる可能性
• 外部 URL に対しては効かない仕様なので、過信しない
• ダウンロードファイル自体はサーバ側で適切な Content-Type / Disposition を返すのがベストプラクティス

JS から動的にダウンロードを発火する

すでに DOM 上にあるリンクに頼らず、ボタンクリックをトリガに JS でファイルを作って即ダウンロードさせるパターンも頻出です。コードでは「不可視のリンクを作って click() を呼び、すぐ取り除く」のがイディオムです。

async function downloadFromApi(apiUrl, filename) {
  const res  = await fetch(apiUrl);
  const blob = await res.blob();
  const url  = URL.createObjectURL(blob);

  const a = document.createElement("a");
  a.href = url;
  a.download = filename;
  a.style.display = "none";
  document.body.appendChild(a);
  a.click();
  a.remove();
  URL.revokeObjectURL(url);
}

// 例: API レスポンスを PDF として保存
downloadFromApi("/api/report.pdf", "report.pdf");

ボタンとして見せる

意味的にダウンロードリンクは ですが、見た目をボタン風にするのは CSS だけで完結します。

.download-btn {
  display: inline-block;
  padding: 10px 20px;
  background: #2563eb;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
}
.download-btn:hover { background: #1d4ed8; }