PDF 파일을 웹 브라우저에서 보여주는 프로그램 입니다.
아이폰, 안드로이드, 엣지등 테스트 결과 잘 작동합니다.
라이센스
/** * @licstart The following is the entire license notice for the * Javascript code in this page * * Copyright 2021 Mozilla Foundation * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. * * @licend The above is the entire license notice for the * Java
[code]
<!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>
[/code]
이미지 버턴 클릭하면 나오게 하기
[code]
<!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>
[/code]
입력방식으로 변경할려면
sir.kr/pdf/index.php?a=../../1.pdf 값으로
index.php 저장 경우
[code]
<!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>
[/code]
댓글 7개
게시글 목록
| 번호 | 제목 |
|---|---|
| 20849 | |
| 20820 | |
| 20819 | |
| 20811 | |
| 20798 | |
| 20791 | |
| 20786 | |
| 20782 | |
| 20768 | |
| 20747 | |
| 20720 | |
| 20715 | |
| 20705 | |
| 20659 | |
| 20654 | |
| 20648 | |
| 20640 | |
| 20620 | |
| 20608 | |
| 20600 | |
| 20599 | |
| 20597 | |
| 20580 | |
| 20574 | |
| 20562 | |
| 20549 | |
| 20542 | |
| 20535 | |
| 20512 | |
| 20503 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기