웹상에서 PDF 뷰어 소스 (copyright 2021 Mozilla)
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개
첫번째 페이지만 나오는데 혹시 전체가 다 나오게 하려면 어찌하나요?
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 | 3년 전 | 4429 | ||
| 2184 | 3년 전 | 3317 | ||
| 2183 | 3년 전 | 2458 | ||
| 2182 | 3년 전 | 4744 | ||
| 2181 | 3년 전 | 2332 | ||
| 2180 | 3년 전 | 2053 | ||
| 2179 | 3년 전 | 1875 | ||
| 2178 | 3년 전 | 3108 | ||
| 2177 | 3년 전 | 1880 | ||
| 2176 |
 Nikonikoni |
3년 전 | 2553 | |
| 2175 | 3년 전 | 1701 | ||
| 2174 | 3년 전 | 2696 | ||
| 2173 | 3년 전 | 2432 | ||
| 2172 | 3년 전 | 2372 | ||
| 2171 | 3년 전 | 3153 | ||
| 2170 |
와칸다포에버
|
3년 전 | 2096 | |
| 2169 | 3년 전 | 2904 | ||
| 2168 | 3년 전 | 2299 | ||
| 2167 | 3년 전 | 2715 | ||
| 2166 | 3년 전 | 1727 | ||
| 2165 |
 Dessi |
3년 전 | 2102 | |
| 2164 |
와칸다포에버
|
3년 전 | 2216 | |
| 2163 | 3년 전 | 3321 | ||
| 2162 | 3년 전 | 3918 | ||
| 2161 | 3년 전 | 3206 | ||
| 2160 | 3년 전 | 2346 | ||
| 2159 | 3년 전 | 6170 | ||
| 2158 | 3년 전 | 3315 | ||
| 2157 | 3년 전 | 3415 | ||
| 2156 |
멀티트리플
|
3년 전 | 1989 | |
| 2155 |
llllIlllIII |
3년 전 | 3111 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기