HTMLでダウンロードボタンを実装する方法

HTMLでダウンロード機能付きのボタンを実装する方法の備忘録です。

実際に作成したボタンのサンプルです。クリックすると、PDFファイルがダウンロードされます。

HTMLのサンプルコードです。

<a href="../download/thanks.pdf" download="thanks.pdf">DOWNLOAD</a>

ボタンを生成する<a>タグの「 href=””」にダウンロードされるファイルのurlを設定します。「 download=””」には、ダウンロードした時に表示するファイル名を設定します。最後に<a>タグの間に、ボタンに表示するテキストを記入してCSSで見た目を設定すれば、ダウンロードボタンの完成です。

pdfファイル以外にも、jpgなどの画像や、csvファイル、zipファイルなども同様に指定できます。