【HTML】aタグでPDFファイルを開く方法【ダウンロードさせる】

パソ君

・aタグでリンク設定はできたけど、pdfファイルを開くにはどうしたらよいの？

こんな疑問にお答えします。

PDFの資料ファイルを開いたり、ダウンロードさせるような仕様にするサイト案件は多くあります。

やり方としては簡単。パスとファイル名、ダウンロード属性を記述するだけ。

ジト

すぐにできるよ！

ということで、この記事では「HTMLのaタグでPDFファイルを開く、ダウンロードさせる方法」について解説していきます！

HTML aタグでPDFファイルを開く方法

結論：aタグのhref属性にパスを記述する。

<a href="./pdf/sample.pdf">PDF</a>

上記のように、開きたいpdfファイルのパスを記述すればOK。

これだけでクリックしたら開けるようになります。

事前にPDFファイルをサーバーにアップしておこう

ちなみにですが、開きたいPDFファイルは事前に「pdf」などとフォルダ名をつけて、サーバーにアップしておきましょう。

HTML aタグでPDFファイルをダウンロードさせる方法

結論：aタグにdownload属性を記述する。

<a href="./pdf/sample.pdf" download="sample.pdf">PDF</a>

上記のように「download属性」＋「値にファイル名」を記述することで、クリックしたらPDFファイルをダウンロードさせることができます。

ジト

値には「.pdf」の拡張子まで記述しよう！

HTML aタグでPDFファイルをリネームしてダウンロードさせる方法

ダウンロードさせるためには、download属性の値にファイル名を記載すれば可能です。

小技ですが、ダウンロードさせるPDFファイル名をリネームする方法があります。

結論：download属性の値を変更する。

<a href="./pdf/sample.pdf" download="最新のサンプル資料.pdf">PDF</a>

これだけでPDFファイル名をリネームさせてダウンロードできます。上記だと「最新のサンプル資料.pdf」としてダウンロードされるということ。

ジト

これをすれば全角文字で扱える！

【HTML】aタグでPDFファイルを開く方法【ダウンロードさせる】：まとめ

・PDFファイルを開く

<a href="./pdf/sample.pdf">PDF</a>

・PDFファイルをダウンロード

<a href="./pdf/sample.pdf" download="sample.pdf">PDF</a>

・PDFファイルをリネームしてダウンロード

<a href="./pdf/sample.pdf" download="最新のサンプル資料.pdf">PDF</a>

ジト

PDFの資料をリンク設定する案件は結構あるので、覚えておこう！

コーディング知識を
『チート級』に得れる教材を作成！

見てみる⋙