iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 16
0
Modern Web

30天學習30套前端技術(2018年)系列 第 16

[十分鐘學習] PDF.js - HTML5 X PDF 聯名

example1

PDF.js是一套由HTML建構的PDF閱讀器,由Mozilla Labs所推廣,目標是建立一個通用的PDF平台

GitHub Star: 20,000
Javascripting Overall: 94%
瀏覽器: ChromeFirefoxIE10+
RWD: 不支援(可運作)
License: Apache-2.0


《安裝》

  • CDN

      <!-- pdf.js v2.0.332 -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.332/pdf.min.js"></script>
    
  • npm

      $ npm install pdfjs-dist
    

《範例》

  • 載入pdf

      <script>
      	var url = "/cdn.mozilla.net/pdfjs/helloworld.pdf";
      	PDFJS.workerSrc = "//mozilla.github.io/pdf.js/build/pdf.worker.js";
      	var loadingTask = PDFJS.getDocument( url );
      	loadingTask.promise.then(
      		function( pdf ) {
      			console.log( "PDF loaded" );
      			var pageNumber = 1;
      			pdf.getPage(pageNumber).then( function( page ) {
      				console.log( "Page loaded" );
      				var scale = 1.5;
      				var viewport = page.getViewport( scale );
      				var canvas = document.getElementById( "example" );
      				var context = canvas.getContext( "2d" );
      				canvas.height = viewport.height;
      				canvas.width = viewport.width;
      				var renderContext = {
      					canvasContext: context,
      					viewport: viewport
      				};
      				var renderTask = page.render( renderContext );
      				renderTask.then( function () { console.log( "Page rendered" ); });
      			});
      		}, function ( reason ) {
      			console.error( reason );
      		}
      	);
      </script>
    
  • 載入pdf,並控制上下頁面

    example2

      <div>
      	<button id="prev">上一頁</button>
      	<button id="next">下一頁</button>
      	<span>頁數: <span id="page_num"></span> / <span id="page_count"></span></span>
      </div>
      <canvas id="example"></canvas>
      <script>
      	// pdf檔案路徑,如果是絕對路徑,請Server使用CORS
      	var url = "//cdn.mozilla.net/pdfjs/tracemonkey.pdf";
      	PDFJS.workerSrc = "//mozilla.github.io/pdf.js/build/pdf.worker.js";
    
      	var pdfDoc = null,
      	pageNum = 1,
      	pageRendering = false,
      	pageNumPending = null,
      	scale = 0.8,
      	canvas = document.getElementById( "example" ),
      	ctx = canvas.getContext( "2d" );
    
      	function renderPage( num )
      	{
      		pageRendering = true;
      		pdfDoc.getPage( num ).then( function( page ) {
      			var viewport = page.getViewport( scale );
      			canvas.height = viewport.height;
      			canvas.width = viewport.width;
      			var renderContext = {
      				canvasContext: ctx,
      				viewport: viewport
      			};
      			var renderTask = page.render(renderContext);
      			renderTask.promise.then( function() {
      				pageRendering = false;
      				if ( pageNumPending !== null ) {
      					renderPage( pageNumPending );
      					pageNumPending = null;
      				}
      			});
      		});
      		document.getElementById( "page_num" ).textContent = num;
      	}
    
      	function queueRenderPage( num )
      	{
      		if ( pageRendering ) {
      			pageNumPending = num;
      		} else {
      			renderPage( num );
      		}
      	}
    
      	function onPrevPage()
      	{
      		// 上一頁
      		if ( pageNum <= 1 ) {
      			return;
      		}
      		pageNum--;
      		queueRenderPage( pageNum );
      	}
      	document.getElementById( "prev" ).addEventListener( "click", onPrevPage );
    
      	function onNextPage()
      	{
      		// 下一頁
      		if ( pageNum >= pdfDoc.numPages ) {
      			return;
      		}
      		pageNum++;
      		queueRenderPage( pageNum );
      	}
      	document.getElementById( "next" ).addEventListener( "click", onNextPage );
    
      	PDFJS.getDocument( url ).then( function( pdfDoc_ ) {
      		pdfDoc = pdfDoc_;
      		document.getElementById( "page_count" ).textContent = pdfDoc.numPages;
      		renderPage( pageNum );
      	});
      </script>
    

《延伸》

  1. PDF.js
  2. mozilla/pdf.js: PDF Reader in JavaScript

上一篇
[十分鐘學習] Ace - 全球最大的程式語言編輯器上線了
下一篇
[十分鐘學習] reveal.js - 網頁?簡報?網站也可以二刀流
系列文
30天學習30套前端技術(2018年)61

尚未有邦友留言

立即登入留言