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
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
HTML href 를 통해 SMS 본문 텍스트를 미리 채우는 방법 (0) | 2020.11.09 |
---|---|
NAVER MAP API V3 네이버 맵 지도 V3 으로 주소와 좌표 검색 API 사용하기 (0) | 2020.10.28 |
PDF.JS - PDF 웹뷰어 범용 웹 표준 기반 플랫폼 (1) | 2020.09.10 |
타이머 timer 시분초를 localStorage 와 함께 사용 (0) | 2020.06.24 |
javascript 의 Template Strings 사용해 보기 (0) | 2020.06.19 |
javascript 의 == (or !=) 보단 === (or !==) 연산자를 사용하자. (0) | 2020.06.19 |
본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.