![パソ君](https://jito-site.com/wp-content/uploads/2022/02/computer09_question.png)
・aタグでリンク設定はできたけど、pdfファイルを開くにはどうしたらよいの?
こんな疑問にお答えします。
PDFの資料ファイルを開いたり、ダウンロードさせるような仕様にするサイト案件は多くあります。
やり方としては簡単。パスとファイル名、ダウンロード属性を記述するだけ。
![ジト](https://jito-site.com/wp-content/uploads/2022/02/image.jpg)
すぐにできるよ!
ということで、この記事では「HTMLのaタグでPDFファイルを開く、ダウンロードさせる方法」について解説していきます!
・HTML aタグでPDFファイルを開く方法
・HTML aタグでPDFファイルをダウンロードさせる方法
目次
HTML aタグでPDFファイルを開く方法
結論:aタグのhref属性にパスを記述する。
<a href="./pdf/sample.pdf">PDF</a>
上記のように、開きたいpdfファイルのパスを記述すればOK。
これだけでクリックしたら開けるようになります。
ちなみにですが、開きたいPDFファイルは事前に「pdf」などとフォルダ名をつけて、サーバーにアップしておきましょう。
![](https://jito-site.com/wp-content/uploads/2022/11/02a9ccaf8703aa69c32b8362f2dd2c10.png)
![](https://jito-site.com/wp-content/uploads/2022/11/0a05cf6ba093848618af2210701998a4-1.png)
HTML aタグでPDFファイルをダウンロードさせる方法
結論:aタグにdownload属性を記述する。
<a href="./pdf/sample.pdf" download="sample.pdf">PDF</a>
上記のように「download属性」+「値にファイル名」を記述することで、クリックしたらPDFファイルをダウンロードさせることができます。
![ジト](https://jito-site.com/wp-content/uploads/2022/02/image.jpg)
値には「.pdf」の拡張子まで記述しよう!
HTML aタグでPDFファイルをリネームしてダウンロードさせる方法
ダウンロードさせるためには、download属性の値にファイル名を記載すれば可能です。
小技ですが、ダウンロードさせるPDFファイル名をリネームする方法があります。
結論:download属性の値を変更する。
<a href="./pdf/sample.pdf" download="最新のサンプル資料.pdf">PDF</a>
これだけでPDFファイル名をリネームさせてダウンロードできます。上記だと「最新のサンプル資料.pdf」としてダウンロードされるということ。
![ジト](https://jito-site.com/wp-content/uploads/2022/02/image.jpg)
これをすれば全角文字で扱える!
【HTML】aタグでPDFファイルを開く方法【ダウンロードさせる】:まとめ
- PDFファイルを開く⇒aタグのhref属性にパスを記述する。
- PDFファイルをダウンロード⇒aタグにdownload属性を記述する。
- PDFファイルをリネームしてダウンロード⇒download属性の値を変更する。
・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>
![ジト](https://jito-site.com/wp-content/uploads/2022/02/image.jpg)
PDFの資料をリンク設定する案件は結構あるので、覚えておこう!