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でも動作します。