WebLabyrinth site image

WebLabyrinthWebに関する様々なメモや個人的実験を行うサイトです

Navi box open

HTML内に自動でPDFを埋め込むJavaScript (jQuery)

PDFファイルをページ内で表示させたかった

WordPress内で、PDFファイルを埋め込むプラグインがあればイイナーと公式のプラグイン検索で探していたのですが、プレビューがうまくされなかったり、埋め込みが結構手間だったりと、なかなか良いプラグインを見つけることができませんでした。

従来PDFファイルのリンクをブラウザで開いた場合、ダウンロードが開始され、読み込み完了後 Adobe Acrobat Reader が立ち上がり、PDFが表示される。…という動作をしていましたが、最近は(PC端末に限りますが)ブラウザ自体がPDF閲覧機能を標準で搭載しているものも増えてきているようなので、以下の様なスクリプトを考えてみました。

jQuery(function(){
	$("#post a").filter('[href*=".pdf"]').each(function(){
		var this_file_url = $(this).attr("href");
		$(this).before( '<object class="pdf_js_view" width="100%" height="700px" data="' + this_file_url + '"></object>' );
	});
});

このJavaScriptをページ内に読み込んでおけば、WordPressの編集画面で普通に「メディアを追加」でPDFファイルを貼り付けてページを開いたときに、自動的にPDFファイルのリンクの属性値を拾ってobjectタグで埋め込んでくれます。
※埋め込む場所は、PDFファイルを埋め込んだ位置の上部になります。

JavaScript(jQuery)の解説

$("#post a").filter('[href*=".pdf"]').each( ...

#post a の部分は、PDFを自動的にobjectタグで埋め込むスクリプトが検出する範囲を指定しています。使用するWordPressのテーマに合わせて修正してください。
今回は、投稿内容を表示させている領域にid=”post”を設定していて、その領域中に埋め込まれているaタグを探す様にしています。
.each()を使用しているのは、PDFファイルがページ内に複数存在した場合を考慮しているためです。

$(this).before( '<object class="pdf_js_view" width="100%" height="700px" data="' + this_file_url + '"></object>' );

.before()の中身は、PDFファイルを埋め込むobjectタグを構成しています。 width、height属性はお好みで構いません。classはcssで装飾する場合は任意で付けてください。

もう少し便利にしてみる

また、PDFファイルを自動埋め込みにするだけではなく、ちょっとしたガイドや、自動的にアイコンを付けたりクリック時に新しいウィンドウで開く機能を追加させると以下の様になります。

jQuery(function(){
	$("#post a").filter('[href*=".pdf"]').append('<img src="./image/icon_pdf.png" title="ファイルを新しいウィンドウで開きます" class="mdp_link_icon" />');
	$("#post a").filter('[href*=".pdf"]').attr("target", "_blank");
	$("#post a").not(".pdf_no_embedded a").filter('[href*=".pdf"]').each(function(){
		var this_file_url = $(this).attr("href");
		$(this).before( '<object class="pdf_js_view" width="100%" height="700px" data="' + this_file_url + '"></object><span class="pdf_notes"><span class="adobe_logo"><a href="https://get.adobe.com/jp/reader/" target="_blank">https://get.adobe.com/jp/reader/</a></span>PDFファイルが閲覧できない場合は、バナーからプラグインをインストールし、下記リンクからPDFファイルをダウンロードしてご覧ください。</span>' );
	});
});

補足になりますが以下の行は、そのままだと全てのPDFファイルに対して埋め込み行為を行ってしまうため、埋め込みを行いたくないファイルがあった場合のことを考慮して、pdf_no_embeddedというclassを付けることで埋め込みを回避するようにしています。

$("#post a").not(".pdf_no_embedded a").filter('[href*=".pdf"]').each(function(){ ...

上記スクリプトの動作サンプルは、下記を参照してください。

Sample: PDF Preview | JavaScript

PDFファイルが埋め込まれたページを Chrome 43、Firefox 38、Internet Explorer 11で開いた時の挙動は、ChromeとFirefoxはそれぞれの独自エンジンでPDFがプレビューされ、Internet Explorerは、objectタグ内でAdobeのアドオンを使用してプレビューされている感じでした。いずれにしろ、ページを開いたらobjectタグ内でPDFの中身が確認できる状態で確認できました。ひと昔なら色々jsライブラリーなど必要だったかもしれませんが、旧ブラウザ環境を意識しなければ現在はこれくらいの対応でも問題ないような気がします(適当)。

冒頭にWordPress内で…と言っていますが、只のjQueryスクリプトですので非WordPressなhtmlでも動作します。

この記事を書いた人

ニックネーム: SHIBAZAKI
ブログ: https://weblabyrinth.net

北海道旭川市でweb関係のお仕事をしています。

Trackback URL

https://weblabyrinth.net/pdf-embed-javascript/trackback/

"HTML内に自動でPDFを埋め込むJavaScript (jQuery)" » 3件のコメント

コメントフィード

  1. はじまして、トトロと申します。
    wordpress内にPDFを埋め込みたいと言う事で、色々なプラグインを試してもうまくいかず、こちらのサイトに行き着いたのですが、私、プログラミング的な事の知識は全くない人間でして、以下のコードをどこにペーストすればいいのか分かりません。
    大変お手数なのですが、ご教示頂けませんでしょうか?
    お忙しいところ誠に恐縮ですが、何卒よろしくお願い申し上げます。

    jQuery(function(){
    $(“#post a”).filter(‘[href*=”.pdf”]’).each(function(){
    var this_file_url = $(this).attr(“href”);
    $(this).before( ” );
    });
    });

    返信
    1. トトロさんこんにちは。
      当スクリプトをWordPress内で使用したいのであれば、ご利用になられているWordPressのテーマテンプレートの中で、header.php の ~ 内にコードを設置するとスクリプトが適用されます。
      但し、当スクリプトはjQueryを使用しているので、WordPressがjQueryを読み込む行より後の位置にコードを設置しなければなりません。
      そのため、header.php 内に設置を行うのであれば、<head> ~ </head> 内の極力下の方に、もしくはheader.php ではなく、footer.php 内の よりも上に設置してみてください。
      そうすることで、当スクリプトが動くようになるはずです。

      ちなみにサンプルのhtmlソースをご覧いただくとわかるのですが、ソースの一番下に、<script type="text/javascript" src="./javascript.js"></script> というファイルをリンクさせてますので、その中に当スクリプトが書かれています。
      外部ファイルで梱包するより、直接htmlファイル内に書いた方がサンプルとしては解りやすかったかもしれませんね。

      一度お試しください。

      返信
    2. ソースを変更してhtml内に直接スクリプトを記述してみました。
      htmlソース最下部にあるスクリプトが対象のコードとなります。

      返信

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください