PDF VIEWER 구현하기
페이지 정보
본문
1. iframe 사용
<iframe src="http://홈페이지주소/test.pdf" style="width:800px; height:700px;" frameborder="0"></iframe>
2. embed 사용
<embed src="/assets/test.pdf" type="application/pdf" />
3. 구글뷰어 이용
<iframe src="http://docs.google.com/gview?url=http://홈페이지주소/test.pdf&embedded=true" style="width:800px; height:700px;" frameborder="0"></iframe>
4. PDF.js 사용 - worker
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PDF.js Example - All Pages</title>
<style>
#pdf-viewer {
width: 100%;
height: 100vh;
overflow: auto;
}
canvas {
display: block;
margin: 10px auto;
}
</style>
</head>
<body>
<div id="pdf-viewer"></div>
<!-- Include PDF.js library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.3.122/pdf.min.js"></script>
<script>
const url = 'YOUR_PDF_URL';
// Load the PDF.js library
const pdfjsLib = window['pdfjs-dist/build/pdf'];
// Specify the workerSrc property
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.3.122/pdf.worker.min.js';
// Load the PDF document
const loadingTask = pdfjsLib.getDocument(url);
loadingTask.promise.then(pdf => {
console.log('PDF loaded');
const viewer = document.getElementById('pdf-viewer');
// Loop through each page
for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
// Fetch the page
pdf.getPage(pageNum).then(page => {
console.log(`Page ${pageNum} loaded`);
const scale = 1.5;
const viewport = page.getViewport({ scale });
// Prepare canvas using PDF page dimensions
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
// Append the canvas to the viewer container
viewer.appendChild(canvas);
// Render the PDF page into the canvas context
const renderContext = {
canvasContext: context,
viewport
};
page.render(renderContext).promise.then(() => {
console.log(`Page ${pageNum} rendered`);
});
});
}
}).catch(error => {
console.error('Error loading PDF: ', error);
});
</script>
</body>
</html>
5. PDF.js 사용 - viewer
<p align="middle"><iframe src="/pdfjs/web/viewer.html?file=http://홈페이지주소/test.pdf"></iframe></p>