【実務・中級編】aタグのdownload属性によるファイルダウンロード制御 – HTML実践ガイド

「ブラウザで開いちゃう問題」をスマートに解決する：aタグのdownload属性を極める

現場でよくある「PDFや画像を表示するんじゃなくて、強制的にダウンロードさせたい」という要件。これ、意外と落とし穴が多いんですよね。

「サーバーサイドで`Content-Disposition`ヘッダーをいじればいいじゃないか」という正論は一旦置いておいて、フロントエンドの領域だけで完結させたい時、あるいはCDNの制約でヘッダーが制御できない時に頼りになるのが、HTML5から標準化された `` タグの `download` 属性です。

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

ここで重要なのは、`download` 属性に値を設定することで、ダウンロード時の「ファイル名」を指定できる点です。サーバー上のファイル名が `001_v2_final_final.pdf` のような悲惨な名前であっても、ユーザーの手元には `manual.pdf` として保存させることができる。UXの観点からも、これは非常に有用です。

なぜ動かないことがあるのか？（ブラウザの裏側と制約）

ここでシニアとして一つ忠告しておきます。この属性、「Same-Origin（同一生成元）」の制約を強く受けます。

ブラウザのセキュリティモデル上、別のドメイン（CORSが適切に設定されていない外部サイトなど）にあるファイルを、`download` 属性で強制的に名前を書き換えて保存することはできません。もし外部リソースに対してこの属性を使っても、ブラウザは無視して通常通りブラウザ上のビューアで開こうとします。

もし外部リソースを強制ダウンロードさせたいなら、一度Blobオブジェクトとしてメモリ上に読み込むか、サーバーサイドでプロキシ（中継）する実装が必要になります。ここを理解せずに「あれ？動かないな」と時間を溶かすジュニアをよく見かけるので注意してくださいね。

実践：Blobを使った「生成型ダウンロード」のベストプラクティス

最近のモダンなフロントエンド開発では、バックエンドからファイルをもらうだけでなく、ブラウザ上でCSVやJSONを生成してダウンロードさせるケースも増えています。その場合の「型」とも言える実装パターンがこれです。

/

• テキストデータを動的にファイルとしてダウンロードさせる関数
• @param {string} content – ダウンロードさせる内容
• @param {string} filename – 保存時のファイル名

/
const downloadTextFile = (content, filename) => {
// 1. データからBlobオブジェクトを生成
const blob = new Blob([content], { type: ‘text/plain’ });

// 2. Blobへの一時的なURLを作成
const url = URL.createObjectURL(blob);

// 3. 仮想的なaタグを作成
const link = document.createElement(‘a’);
link.href = url;
link.download = filename;

// 4. ドキュメントに追加してクリックを発火
document.body.appendChild(link);
link.click();

// 5. 後処理：DOMから削除し、URLメモリを解放
document.body.removeChild(link);
URL.revokeObjectURL(url);
};

// 使い方:
// downloadTextFile(‘Hello, World!’, ‘hello.txt’);

なぜこの手順が必要か？

• `URL.createObjectURL`: メモリ上にブラウザがアクセス可能な一時的なURLを生成します。
• `document.body.appendChild(link)`: 一部のブラウザ（特にFirefox等）では、DOMに存在しない要素の `click()` イベントを無視する仕様があるため、一瞬だけDOMに挿入するのが安全です。
• `URL.revokeObjectURL`: これを忘れるとメモリリークの原因になります。生成したURLは使い終わったら必ず破棄する。これがプロの仕事です。

まとめ：使いどころの見極め

`download` 属性は、あくまで「ユーザー体験を補助するためのもの」です。

• 静的ファイルの場合: `` タグに `download` を添えるだけでOK。ただし同一ドメインに限る。
• 動的生成ファイルの場合: BlobとURL生成を組み合わせる。
• どうしてもクロスドメインでDLさせたい場合: フロントだけで完結させようとせず、サーバーサイドで `Content-Disposition: attachment` ヘッダーを吐かせるのが、最も堅牢でトラブルの少ない「正解」です。