<!DOCTYPE html>
<html>
<head>
<title>PDF Viewer</title>
<style>
#pdf-container {
width: 100%;
height: 100%; /* 크기를 조정할 수 있습니다. */
}
</style>
</head>
<body>
<div id="pdf-container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
<script>
// PDF 파일 경로
const pdfUrl = 'PDF파일위치경로';
// PDF.js로 PDF 파일 불러오기
pdfjsLib.getDocument(pdfUrl).promise.then(function(pdf) {
// 첫 번째 페이지 가져오기
pdf.getPage(1).then(function(page) {
// 캔버스 생성
const canvas = document.createElement('canvas');
const canvasContext = canvas.getContext('2d');
// 페이지 크기 설정
const viewport = page.getViewport({ scale: 1.0 });
canvas.width = viewport.width;
canvas.height = viewport.height;
// 페이지를 캔버스에 그리기
const renderContext = {
canvasContext,
viewport
};
page.render(renderContext).promise.then(function() {
// 캔버스를 HTML에 추가
const pdfContainer = document.getElementById('pdf-container');
pdfContainer.appendChild(canvas);
});
});
});
</script>
</body>
</html>
이미지 버턴 클릭하면 나오게 하기
<!DOCTYPE html>
<html>
<head>
<title>PDF Viewer</title>
<style>
body, html {
height: 100%;
margin: 0;
overflow: hidden;
}
#pdf-container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#pdf-canvas {
width: 100%;
height: 100%;
object-fit: contain;
}
</style>
</head>
<body>
<button id="file1-btn">File 1</button>
<button id="file2-btn">File 2</button>
<button id="file3-btn">File 3</button>
<div id="pdf-container">
<canvas id="pdf-canvas"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
<script>
function openPDF(pdfUrl) {
// PDF.js로 PDF 파일 불러오기
pdfjsLib.getDocument(pdfUrl).promise.then(function(pdf) {
// 첫 번째 페이지 가져오기
pdf.getPage(1).then(function(page) {
// 캔버스 생성
const canvas = document.getElementById('pdf-canvas');
const canvasContext = canvas.getContext('2d');
// 페이지 크기 설정
const viewport = page.getViewport({ scale: 1.0 });
const scale = Math.min(canvas.width / viewport.width, canvas.height / viewport.height);
const scaledViewport = page.getViewport({ scale });
// 캔버스 크기 조정
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
// 페이지를 캔버스에 그리기
const renderContext = {
canvasContext,
viewport: scaledViewport
};
page.render(renderContext).promise.then(function() {
// PDF 컨테이너 표시
const pdfContainer = document.getElementById('pdf-container');
pdfContainer.style.display = 'flex';
});
});
});
}
// 파일 클릭 시 해당 PDF 열기
const file1Url = 'https://naver.com/pdf/1.pdf'; // 이미지 위치
const file2Url = 'https://naver.com/pdf/2.pdf'; // 이미지 위치
const file3Url = 'https://naver.com/pdf/3.pdf'; // 이미지 위치
const file1Btn = document.getElementById('file1-btn');
file1Btn.addEventListener('click', function() {
openPDF(file1Url);
});
const file2Btn = document.getElementById('file2-btn');
file2Btn.addEventListener('click', function() {
openPDF(file2Url);
});
const file3Btn = document.getElementById('file3-btn');
file3Btn.addEventListener('click', function() {
openPDF(file3Url);
});
</script>
</body>
</html>
입력방식으로 변경할려면
sir.kr/pdf/index.php?a=../../1.pdf 값으로
index.php 저장 경우
<!DOCTYPE html>
<html>
<head>
<title>PDF Viewer</title>
<style>
body, html {
height: 100%;
margin: 0;
overflow: hidden;
}
#pdf-container {
width: 100%;
height: 100%;
overflow: auto;
}
#pdf-canvas {
display: block;
margin: 0 auto;
max-width: 100%;
object-fit: contain;
}
</style>
</head>
<body>
<div id="pdf-container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
<script>
// URL에서 PDF 파일 경로 가져오기
const urlParams = new URLSearchParams(window.location.search);
const pdfUrl = urlParams.get('a');
function openPDF(pdfUrl) {
// PDF.js로 PDF 파일 불러오기
pdfjsLib.getDocument(pdfUrl).promise.then(function(pdf) {
const pdfContainer = document.getElementById('pdf-container');
// 각 페이지를 순회하며 캔버스를 생성하고 추가
for (let pageNumber = 1; pageNumber <= pdf.numPages; pageNumber++) {
pdf.getPage(pageNumber).then(function(page) {
// 캔버스 생성
const canvas = document.createElement('canvas');
const canvasContext = canvas.getContext('2d');
// 페이지 크기 설정
const viewport = page.getViewport({ scale: 1.0 });
const scale = Math.min(pdfContainer.offsetWidth / viewport.width, pdfContainer.offsetHeight / viewport.height);
// 캔버스 크기 조정
canvas.width = viewport.width * scale;
canvas.height = viewport.height * scale;
// 페이지를 캔버스에 그리기
const renderContext = {
canvasContext,
viewport: page.getViewport({ scale })
};
page.render(renderContext).promise.then(function() {
// 캔버스를 PDF 컨테이너에 추가
pdfContainer.appendChild(canvas);
});
});
}
});
}
if (pdfUrl) {
openPDF(pdfUrl);
}
</script>
</body>
</html>