PDF.jsの簡単な使い方、pdf全ページを縦一列に一覧表示する方法

目的

javascriptでpdfを縦に全ページ表示したいと考え、今回プログラムを作成しました。
このプログラムを使用することで、HTML上に画像としてPDFを表示することができます。
それにより、新規ウィンドウでの表示やダウンロードの必要なく、PDFを公開できます。
 

 
WebサイトにPDFを多く掲載している、PDFを表示するサイトを作成したいといった方におすすめです。

準備

公式サイトより、downloadボタンから「pdf.js」をダウンロードします。
PDF.js公式

DL後、解凍をしてフォルダ名をpdfjs-distに変更します。(解凍したフォルダは全て使用します)
今回は例として「/common/js/」に「pdfjs-dist」を設置します。

PDFを表示するプログラム例

<div id="pdfjs_view"></div>
<style>
	#pdfjs_view canvas{
		width: 100%;
		display: block;
	}
</style>

<!-- pdf.jsのURL -->
<script src="/common/js/pdfjs-dist/build/pdf.js"></script>

<script>
	//ここにPDFのURL
	var url = "XXXXXXXXXXXXX.pdf";

	var pdfjsLib = window['pdfjs-dist/build/pdf'];

	// pdf.worker.js のURL
	pdfjsLib.GlobalWorkerOptions.workerSrc
	= "/common/js/pdfjs-dist/build/pdf.worker.js";

	var loadingTask = pdfjsLib.getDocument(url);
	var pdfjs_target = document.getElementById('pdfjs_view');
	
	var page_w = 1000;
	var scale = 1;

	loadingTask.promise.then(
		function (pdf) {
			for( var i=1; i<=pdf._pdfInfo.numPages; i++ ){

				pdf.getPage(i).then(function (page) {
					
					//横幅を1000pxに調整
					page_w = page._pageInfo.view[2];
					scale = 1000 / page_w;
					

					var viewport = page.getViewport({ scale: scale });
					var canvas = document.createElement("canvas");
					var context = canvas.getContext("2d");
					canvas.width = viewport.width;
					canvas.height = viewport.height;

					var renderContext = {
						canvasContext: context,
						viewport: viewport,
					};
					pdfjs_target.appendChild(canvas);
					page.render(renderContext);
				});
			}
		}
	);
</script>

プログラムによるPDFの表示例

今回紹介したプログラムを使った時のPDF表示例となります。
PDFの全ページが縦に並んで表示されると成功です。
※表示例では2ページのPDFとなります。
 

 
・表示例

まとめ

今回はPDFを全ページ縦一覧に表示するプログラムを紹介しました。1ページ1ページをcanvasで描画するといった方法で実装しましたが、手軽にPDFを表示出来るので使いやすいと思います。
PDFを多様するWebサイトにはおすすめとなります。
 

 
しかしPDFを全ページ分処理するため、PDFのページ数が多いと処理が重たくなる可能性がある点は注意して下さい。
 

ルナリス

結構無理やり実装したけど他に良い方法があったら教えて頂戴