ダウンロードリンクの動作を自由自在に！HTMLのa要素とdownload属性の活用術

2024-05-20

HTMLでダウンロードリンクを作成する方法

基本的な書き方

<a href="ファイルのURL" download="ファイル名">ダウンロードリンクのテキスト</a>

例

<a href="/files/sample.pdf" download="sample.pdf">サンプルPDFをダウンロード</a>

このコードは、/files/sample.pdfにあるPDFファイルを「sample.pdf」という名前でダウンロードするリンクを作成します。

download属性について

download属性には、ダウンロード時に表示されるファイル名を指定します。
実際のファイル名と異なる名前を指定することができます。
値を省略することもできますが、その場合はファイルの元の名前が使用されます。

target属性：ダウンロードリンクの動作を指定できます。
- _blank：新しいタブでファイルを開きます。
type属性：ダウンロードするファイルの種類を指定できます。
- application/pdf：PDFファイル
- text/plain：テキストファイル

注意点

download属性は、すべてのブラウザでサポートされているわけではありません。
ファイルのダウンロードには、ユーザーの許可が必要です。

HTMLでダウンロードリンクを作成するサンプルコード

基本的な例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ダウンロードリンクの例</title>
</head>
<body>
  <a href="/files/sample.pdf" download="sample.pdf">サンプルPDFをダウンロード</a>
</body>
</html>

複数のファイルをダウンロード

この例では、複数のファイルをまとめてダウンロードするリンクを作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ダウンロードリンクの例</title>
</head>
<body>
  <a href="/files/archive.zip" download="archive.zip">ファイルをまとめてダウンロード</a>
</body>
</html>

ファイルの種類を指定

この例では、テキストファイルをダウンロードするリンクを作成し、ファイルの種類をtext/plainに指定します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ダウンロードリンクの例</title>
</head>
<body>
  <a href="/files/data.txt" download="data.txt" type="text/plain">テキストファイルをダウンロード</a>
</body>
</html>

新しいタブで開く

この例では、ダウンロードリンクをクリックすると、新しいタブでファイルが開くようにします。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ダウンロードリンクの例</title>
</head>
<body>
  <a href="/files/sample.pdf" download="sample.pdf" target="_blank">サンプルPDFをダウンロード</a>
</body>
</html>

これらのサンプルコードを参考に、状況に合わせてダウンロードリンクを作成してください。

a要素とdownload属性を使用する

これが最も一般的で簡単な方法です。上記の説明で詳しく紹介したので、ご参照ください。

iframe要素を使用して、ファイルをダウンロードさせる方法もあります。この方法は、download属性がサポートされていない古いブラウザでも動作します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ダウンロードリンクの例</title>
</head>
<body>
  <iframe src="/files/sample.pdf" style="display: none;"></iframe>
</body>
</html>