PDFファイルをダウンロードさせたい場合のHTMLコード

サイト内にPDFファイルへのリンクを貼って、 PDFファイルダウンロードさせたい場合があります。

その場合のHTMLコードの記述方法を説明します。

HTMLコードの記述例

HTMLで他ページへのリンクを貼る場合、次のように記述します。


<a href="hoge.html">リンク文言</a>

PDFファイルをダウンロードさせたい場合も同じように記述します。

例えば、sample.pdf というPDFファイルをダウンロードさせたい場合、 次のような記述になります。


<a href="sample.pdf">sample.pdfはこちらから</a>

href 属性にPDFファイル名を記述するだけです。

他ページへのリンクと同じ書き方なので、難しく考える必要はありません。

ファイルの階層について

先程のPDFファイルの指定方法をもう一度見てみます。

<a href="sample.pdf">sample.pdfはこちらから</a>

この場合、WebページとPDFファイルが同じ階層(ディレクトリ)にあることを前提としています。

もし、違う階層にある場合は、指定方法に気をつけてください。

Webページ内に download というディレクトリ(フォルダ)があって、 その中に sample.pdf ファイルがある場合は、次のようになります。


<a href="download/sample.pdf">sample.pdfはこちらから</a>

上記のような書き方を「相対パス」といいます。 「相対パス」の考え方が面倒なら、「絶対パス」で記述してもOKです。 「絶対パス」で記述するなら次のようになります。

<a href="https://hoge.com/download/sample.pdf">sample.pdfはこちらから</a>

まとめ

・PDF ファイルをダウンロードさせたい場合は、a タグの href 属性に PDF ファイル名を記述します。

・WebサイトとPDFファイルの階層が違う場合は、階層を適切に指定してください。

・ファイルの指定方法には、「相対パス」と「絶対パス」の2通りがあります。