PDFファイルなどをダウンロードさせる方法

■PDFファイルなどをダウンロードさせる方法■

 

参考サイト(=https://ameblo.jp/webmagic/entry-10894322685.html)

 

●基本設定

ホームページで別のページにリンクする際は
ご存知のようにこのように表現します。

index.htmlファイル内で任意の文字をクリックすると、
同じ階層にあるservice.htmlのページに飛ばしたい・・・というときは

<a href=”service.html”>サービス案内のページへ</a>

 

つまり

<a href=”service.html”>
このカンマの中に、飛ばし先のファイル名を記載していることになります。

PDFファイルも同じです。

index.htmlと同じ階層にfile.pdf というPDFファイルを置いて
そのファイルを呼び出したい時は

<a href=”file.pdf”>詳細の資料はこちらからダウンロードできます(file.pdf)</a>

 

 

●別ウィンドウ(別タブ)に表示させる

 

これに少し親切さを加えるならば1本指
保存ではなくその場で開く人のために、今見ているindex.htmlファイルとは
別のウィンドウ(タブ)で出してあげるといいと思います。

PDFファイルって開いてみると、習慣で右上の×印をクリックして画面を閉じてしまいがちです。

index.htmlの画面がそのままPDFファイルに切り替わってしまうと、これを閉じたときにindex.htmlも閉じてしまうことになり、「あれあれ、閉じちゃった(汗)」っていうことがあります。

 

別ウィンドウ(別タブ)で出すには

<a href=”file.pdf” target=”_blank”>詳細の資料はこちらからダウンロードできます(file.pdf)</a>

 

と、 target=”_blank” を加えてあげます。
実際に試してその違いを理解してください。

 

●階層の指定に気をつけてる

 

もう一つの注意点はファイルの置き場と指定の仕方です。

WEB MAGICで配布しているテンプレートのように
例えば、イメージ画像が複数になる場合は、それ専用の置き場(フォルダ)を作ってあげるとファイル類がごちゃごちゃにならずに済むわけですが、

ホームページ上で複数のPDFファイルを管理する場合に、仮にPDF専用のpdfという名前のフォルダを作ってあげて、そこに先ほどのfile.pdf を入れたとします。

 

その場合は、index.html とfile.pdf の置き場所は階層が違いますから
指定はこうなります。

<a href=”pdf/file.pdf” target=”_blank”>詳細の資料はこちらからダウンロードできます(file.pdf)</a>

 

つまり、こういうことですね。(pdfファイルの中にあるfile.pdfを新しいタブで開くということ)

 

 

 

ローカルで(自分のPC内で)確認をしてPDFファイルを開くことができたら、あとはサーバーにアップロードするだけです。
ローカルと、サーバーの内容は同じ階層に同じようにファイルを置きましょう。

 

できたかな?