PDFファイルをホームページに埋め込んで表示する

Home » お役立ち » PDFファイルをホームページに埋め込んで表示する

>>自分のサイトにアップしたPDFファイルを表示する場合

>>GoogleドライブにアップしたPDFファイルを表示する場合

>>PDFファイルをJPG画像に変換して表示する場合

 

■自サイトにアップしたPDFを表示する方法

以下のソースコードの必要箇所を変更して表示したいページに記入してください。

【変更点】

以下のurl=の後の[エンコードしたURL]の箇所を表示したいPDFファイルのURLに変更してください。
必要に応じてwidth(幅)やheight(高さ)を変更してください。

<iframe src=”https://docs.google.com/viewer?url=[エンコードしたURL]&embedded=true” width=”600″ height=”400″></iframe>

 

■Googleドライブにアップする方法

(1)Googleドライブにアップロード

表示させたいPDFファイルをお持ちのGoogleのアカウントでログインしてGoogleドライブにアップする。

(2)PDFファイル共有設定

該当のPDFを右クリックし「共有」をクリックする。
誰でも制限なしで公開したい場合は「リンクを知っている全員」をクリックして制限を解除する。

 

 

(3)新しいウィンドウで開く

該当のPDFファイル自体をクリックしてPDFを表示して、右上の3点ボタンをクリックして設定メニューを開く。
メニュー内の「新しいウィンドウで開く」をクリックする。

(4)アイテムの埋め込み用コードをコピーする

新しいウィンドウでPDFを開いた状態で再度、右上の3点ボタンをクリックして設定メニューを開く。
メニュー内の「アイテムを埋め込む」をクリックすると埋め込み用のコードが表示されるのコピーする。

(5)コードをホームページに埋め込む

上記でコピーしたコードを表示したいページ内に貼り付けをして埋め込む。

 

■PDFファイルをJPG画像に変換して表示する方法

以下のようなPDFファイルをJPG画像に変換して表示したいページ内に貼り付けをして表示してください。

https://www.ilovepdf.com/ja/pdf_to_jpg

https://acrobat.adobe.com/link/acrobat/pdf-to-image