PDF.JS - PDF 웹뷰어 범용 웹 표준 기반 플랫폼

PDF 구문 분석 및 렌더링을 위한 범용 웹 표준 기반 플랫폼입니다 .

간단하게 말하면 웹상에서 PDF 를 뷰어형태로 제공해 주는 오픈소스를 의미합니다.

이 예제는 로드 중에 오류를 처리하기 위해 promise를 사용하는 방법을 보여줍니다.

또한 페이지가로드되고 렌더링 될 때까지 기다리는 방법을 보여줍니다 .

mozilla.github.io/pdf.js/examples/

Examples

Hello World Walkthrough Full source PDF.js heavily relies on the use of Promises. If promises are new to you, it’s recommended you become familiar with them before continuing on. This tutorial shows how PDF.js can be used as a library in a web browser.

mozilla.github.io

.html

<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>

<h1>PDF.js 'Hello, world!' example</h1>

<canvas id="the-canvas"></canvas>

.css

#the-canvas {
  border: 1px solid black;
  direction: ltr;
}

.js

// If absolute URL from the remote server is provided, configure the CORS
// header on that server.
var url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf';

// Loaded via <script> tag, create shortcut to access PDF.js exports.
var pdfjsLib = window['pdfjs-dist/build/pdf'];

// The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';

// Asynchronous download of PDF
var loadingTask = pdfjsLib.getDocument(url);
loadingTask.promise.then(function(pdf) {
  console.log('PDF loaded');
  
  // Fetch the first page
  var pageNumber = 1;
  pdf.getPage(pageNumber).then(function(page) {
    console.log('Page loaded');
    
    var scale = 1.5;
    var viewport = page.getViewport({scale: scale});

    // Prepare canvas using PDF page dimensions
    var canvas = document.getElementById('the-canvas');
    var context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    // Render PDF page into canvas context
    var renderContext = {
      canvasContext: context,
      viewport: viewport
    };
    var renderTask = page.render(renderContext);
    renderTask.promise.then(function () {
      console.log('Page rendered');
    });
  });
}, function (reason) {
  // PDF loading error
  console.error(reason);
});