aタグ、buttonタグでファイルをダウンロードの実装方法

2024年7月18日2024年7月20日

aタグ、buttonタグを使用してファイルをダウンロードの実装方法について解説します。

PDFファイルなどをユーザーにダウンロードしていただく実装に使用します。

りゅう

ダウンロードボタンを実装するときに使えます。

この記事でわかること

aタグでファイルのダウンロードの実装方法
download属性について
buttonタグでファイルのダウンロードの実装方法
WordPressでのファイルのダウンロードの実装方法

aタグでファイルをダウンロードする方法
buttonタグでファイルのダウンロードの実装方法
WordPressでのファイルのダウンロードの実装方法
まとめ

aタグでファイルをダウンロードする方法

aタグでファイルのダウンロードの実装例は以下のとおりです。

ダウンロードはこちら

上記の「ダウンロード」を押すとファイルがダウンロードされます。
CSSでスタイルを調整すればボタン型のものも作成できます。

See the Pen Untitled by 竜貴族 (@czuqbsxm-the-selector) on CodePen.

<a href="ファイルパス" download="sample" class="download-btn">ダウンロード</a>

a {
  text-decoration: none;
}

.download-btn {
  display: block;
  width: 200px;
  padding: 20px;
  text-align: center;
  background: #000;
  color: #fff;
  border: solid 1px currentColor;
  transition: all 0.3s;
}
.download-btn:hover, .download-btn:focus {
  color: #000;
  background: #fff;
  border-color: #000;
}

href属性にはダウンロードさせたいファイルのパスを指定します。

download属性を追加することで、リンクをクリックした際にブラウザがファイルをダウンロードさせます。download属性の指定がなければ、ファイルのダウンロードは行われず、ユーザーがhref属性のリンクに遷移することとなります。

download属性に値を指定することで、ダウンロードされるファイルの名前を指定することもできます。
上記の例ですと、「sample」というファイル名でダウンロードされます。

buttonタグでファイルのダウンロードの実装方法

buttonタグを使ってファイルをダウンロードするには、JavaScriptを使用してaタグのダウンロード機能をトリガーします。

See the Pen buttonタグでダウンロード by 竜貴族 (@czuqbsxm-the-selector) on CodePen.

<button id="js-download-btn" class="download-btn">ダウンロード</button>

document.getElementById('js-download-btn').addEventListener('click', function() {
    var fileUrl = 'ファイルへのパス'; // ダウンロードするファイルのURL
    var fileName = 'sample.pdf'; // ダウンロードする際のファイル名

    var a = document.createElement('a');
    a.style.display = 'none';
    a.href = fileUrl;
    a.download = fileName;

    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
});

仕組みはaタグのダウンロード機能と同じで、buttonタグをクリックするとaタグのダウンロード機能の実装をJavaScriptで行っています。

変数fileUrlにファイルのパスを入力し、指定のファイルをダウンロードさせることができます。