こういった方向けに、HTMLだけでファイルをダウンロードできるようにする方法を解説します。
こんにちは、リバティエンジニアのFUNA（フナ）です。
現役でフリーランスのエンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。
この記事はこんな方におすすめ
- HTMLだけでファイルダウンロードの機能を設定したい
- コピペで簡単に実装したい
今回は、HTMLでファイルのダウンロードを設定する方法について解説します。
方法としては、aタグにdownload属性を入れるだけで、ファイルをダウンロードするリンクを作成することができます。
ここでは、具体的な書き方と動作を確認していこうと思います。
目次
HTMLでファイルのダウンロードを設定する方法
早速本題ですが、HTMLでファイルをダウンロードするには、「aタグ」を使います。
aタグは、みなさんもよく使う別のページなどにリンクするために使いますよね。
そのaタグに「download属性」を設定するだけで簡単に実装できます。
HTMLのaタグにdownload属性を設定する構文
download属性の設定は非常に簡単です。
<a href="test.pdf" download="test.pdf">test.pdfのダウンロード</a>
このように、aタグに「download=""」を追加して、ダウンロードするファイルのパス（URL）を「href=""」内に記述するだけです。
- 「href=""」には、ダウンロードするファイルパス
- 「download=""」には、ファイルをダウンロードしたときの、デフォルトのファイル名
上記のサンプルコードでは、pdfファイルで記述していますが、pdf以外のファイルも設定できます。
例えば、画像ファイルやワード・エクセルといったファイルもダウンロード可能です。
【サンプルコード】HTMLでファイルダウンロードを設定
では、サンプルコードを見ていきます。
【準備】ディレクトリを作成する
まずは、ダウンロードするファイルを用意する必要があります。
ディレクトリは下記のようにします。
- sample-project
- index.html
- img
- sample.pdf
HTMLを記述する
準備ができたので、「index.html」を記述しましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>file download test</title>
</head>
<body>
<a href="./img/sample.pdf" download="sample.pdf">PDFをダウンロード</a>
</body>
</html>
たったのこれだけで実装完了です！
とても簡単ですが実用性があるので、ぜひ覚えておきましょう。
関連記事
-
【CSS】たった1行のコピペで簡単！object fitで画像をトリミングする方法
CSSで画像をトリミングしたい時にたったの1行で実装できる方法を解説します。「object-fit」についてどのような時に使うのか、その使い方や応用の仕方を覚えてみてください。
-
【コピペOK】CSSでcounterを利用して自動ナンバリングする方法
今回はCSSの「counter」をコピペでも簡単に実装できる方法・ソースコードをご紹介します。このcounterを利用することで、CSSだけで自動でナンバリングを実装することができます。意外と知られていないのですが、「1 2 3 4」の基本のものや「第1章 第2章 第3章 第4章」と書き出しをつけたりすることができて、幅広く応用できます。
-
【コピペOK】CSSだけで背景を斜めに区切る方法【レスポンシブ対応】
今回は、HTML/CSSで背景を斜めに区切ってデザインする方法を、コピペでも簡単に実装する方法を解説します。ランディングページやコーポレートサイトなどの作成時に背景を斜めに区切ってレイアウトされているサイトを良く見かけますが、実装の仕方は簡単なので、ぜひ覚えておきましょう。
-
【コピペでOK】HTMLで直接ファイルをダウンロードできるように設定する方法
今回は、HTMLでファイルのダウンロードを設定する方法について解説します。方法としては、aタグにdownload属性を入れるだけで、ファイルをダウンロードするリンクを作成することができます。ここでは、具体的な書き方と動作を確認していこうと思います。
-
CSSアニメーションを簡単に実装！コピペOKのサンプルコード付き【HTML/CSS】
CSSのみで実装することのできるアニメーションの方法を解説します。サンプルコード付きでわかりやすく、コピペでも簡単に実装できるようになっていますので、実際に動かして試してみてください。