PDF.jsのviewer.htmlの応用

: らら

2021.02.03

はじめに

今回は、PDFをダウンロードしなくても閲覧ができる。PDF.jsの応用です。viewer.html自体日本語にも対応していて文字化けはありません。

PDF.jsでは、200ページを超える膨大なPDFファイルだと、JavaScriptで作られているので表示が遅くなってしまいます。

それを回避する方法です。この場合、viewer.htmlのボタン等が一部、無意味になります。

インストール方法

https://mozilla.github.io/pdf.js/getting_started/#download

上記URLからPrebuiltを選択してダウンロードします。

ES5とES6のどちらかを選択します。古いブラウザーでも動作させたい場合,ES5を選びます。

新しいブラウザーだけという場合は、ES6を選びます。

下記の２つのフォルダーだけ使用します。


Prebuilt
├── build/
├── web/
├── pdf/分割したPDFの置き場

今回はwebフォルダーにある。viewer.htmlを使用します。また、viewer.htmlは内部的にbuildも利用しているため、２つのディレクトリは必須です。

応用

viewer.htmlは引数でPDFファイルの引き渡しが可能です。

書式

viewer.html?file=PDFファイル名

膨大なページ数がある場合、その１つのファイルのPDFを１ページずつのPDFファイルの変換します。

ファイル名はページ番号にします。


0000.pdf	表紙
0001.pdf
0002.pdf
0003.pdf
0004.pdf

下記のHTMLを作成します。iframeの部分がviewer.htmlになります。

分割したPDFをページ制御するために、ボタンを準備します。


	<div class="base">
	<header>
		<h1>PDFサンプル</h1>
		<div>
			<div id="pageControl">
				<button id="prev">前へ</button>
				<button id="next">次へ</button>
			</div>
			<form id="form1" name="form1">
				<input type="text" name="p" id="p" size="5" value="">ページを<input type="button" id="btnPageChange" name="btnPageChange" value="表示">
			</form>
		</div>
	</header>
	<article>
		<iframe id="pdfframe" title="PDFサンプル" name="pdfframe" src="./web/viewer.html?file=damy"></iframe>
	</article>

PDFを呼び出す部分JavaScript

コメントにしている部分をコメントを外してその上の行をコメントにすると

PDF.jsを使用しないモードになります。IE11、古いブラウザーを加味しない場合、ブラウザーのPDF読み込みを使用できるようにしています。

ブラウザーのPDFが標準でなくなった場合も対応がどちらでもできます。たぶん。


	var base_url = "http://あなたのドメイン";
	var view_url = base_url + "/web/viewer.html";
	var NOW_PAGE = 0;
	var PDF_PAGEMAX= 2;		//PDF最大ページ数
	function openpdf(pg){
		pg = ( '0000' + pg ).slice( -4 );	//桁数は4
		var pdf_path = "../pdf/"  + pg +".pdf";
		var url= view_url+"?file="+pdf_path;
		//ブラウザーデフォルト　IE11非対応
//		var url= "./data/" +  pg +".pdf";
		$('#pdfframe', parent.document).attr("src", url);
		NOW_PAGE = pg;
		$('input[name="p"]').val(parseInt(NOW_PAGE));
	}

ページ制御部分JavaScript


	//TOPpageデフォルトセット0000.pdfを表示
	openpdf(NOW_PAGE);
	//enterで検索
	$("#p").keypress(function(event){
		if((event.which && event.which == 13) || (event.keyCode && event.keyCode == 13)){
			var pg = $('input[name="p"]').val();
			if(!isNaN(pg)){
				openpdf(pg);
			} else {
				alert("数値以外が入力されています");
			}
			return false;
		}
	});
	// page no input
    $("#btnPageChange").click(function() {
		var pg = $('input[name="p"]').val();
		if(!isNaN(pg)){
			openpdf(pg);
		} else {
			alert("数値以外が入力されています");
		}
    });
	// page prev
    $("#prev").click(function() {
		NOW_PAGE--;
		if(NOW_PAGE < 0) {
			NOW_PAGE = PDF_PAGEMAX;
		}
		openpdf(NOW_PAGE);
    });
	// page next
    $("#next").click(function() {
		NOW_PAGE++;
		if(NOW_PAGE > PDF_PAGEMAX) {
			NOW_PAGE = 0;
		}
		openpdf(NOW_PAGE);
    });

さらに応用

CSV or SQLで下記のレコード形式でデータを作成してajax等で入力されたキーワードが一致した場合ページ番号を返す、結果のリストを表示するCGIを作成すれば、検索付きのシステムができます。

1000ページ以下であれば、保守を考えた場合、CSVをそのまま置いてファイル形式の方が楽かもしれません。


page番号,商品名,検索キーワード
0001,ピーマン,野菜、ピーマン


    $("#btnSearch").click(function() {
		var search = $('input[name="search"]').val();
		$.ajax({
			url: base_url+"/index.php",
			dataType: "json",
			cache : false,
			type:'POST',
			data:{
				'search': search,
			},
			error: function(XMLHttpRequest, textStatus, errorThrown) {
			},
			success: function( data ) {
				for( var i = 0; i < data.data.length;i++ ) {
					page = data.data[i].page;
//検索結果のリスト表示
				}
			}
		});
	});