【HTML】aタグとbuttonタグでファイルをダウンロードさせる方法

Webサイトでユーザーにファイルを提供する際に、aタグやbuttonタグを使ったダウンロード機能は非常に便利です。この記事では、これらのタグを使用してファイルをダウンロードさせる方法について詳しく解説します。

aタグを使用したファイルのダウンロード
buttonタグを使用したファイルのダウンロード
aタグとbuttonタグの使い分け
まとめ

aタグを使用したファイルのダウンロード

aタグを使用してファイルをダウンロードさせる方法は非常にシンプルです。以下のコード例を見てください。

<a href="path/to/file.zip" download="custom_filename.zip">Download File</a>

href属性にダウンロードしたいファイルのURLを指定します。
download属性を追加することで、リンク先のファイルが自動的にダウンロードされます。ファイル名を指定しない場合、元のファイル名が使われますが、任意のファイル名を指定することも可能です。

buttonタグを使用したファイルのダウンロード

buttonタグを使ってファイルをダウンロードさせるには、JavaScriptの力を借りる必要があります。以下のコード例では、ボタンをクリックすると、ファイルのダウンロードが開始される仕組みを実装しています。

<button id="downloadBtn">Download File</button>

<script>
document.getElementById('downloadBtn').addEventListener('click', function() {
    const link = document.createElement('a');
    link.href = 'path/to/file.zip';
    link.download = 'custom_filename.zip';
    link.click();
});
</script>

このコードでは、buttonタグをクリックした際に、JavaScriptで動的にaタグを生成し、ファイルのダウンロードを行います。