심재운 블로그

 

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);
});

 

원본소스

 

github.com/mozilla/pdf.js/blob/master/examples/learning/helloworld.html

 

FAQ 도 있네요. 궁금한건 여기서.. 찾아보면 좋을 듯 싶네요.

github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions

 

mozilla/pdf.js

PDF Reader in JavaScript. Contribute to mozilla/pdf.js development by creating an account on GitHub.

github.com

 

이 글을 공유합시다

facebook twitter kakaoTalk kakaostory naver band

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.

비밀글모드