고정 헤더 영역
 |
 |
 |
 |
 |
 |
 |
상세 컨텐츠
본문
반응형
pdf를 웹상에서 바로보기
pdf문서를 웹상에서 바로보기 위해서는 여러가지 방법이 있는데요. 대부분은 브라우저에 플러그인이 있어서, pdf문서를 브라우저에서 바로 볼수 있긴 합니다.
플러그인이 없거나 모든 브라우저에서 보게 하려면?
하지만, 플러그인이 설치되지 않았을 경우, 또는 여러가지 브라우저에서 모두 보이게 하려면 별도의 코딩이 필요하겠죠. 오늘 소개드리려는 pdf 뷰어는 PDF.js 입니다.
또한, 전체화면이 아니라 일부분에 pdf 문서를 표시하고자 할때에도 별도의 pdf뷰어를 설치해야 합니다.
위 사이트에서 다운로드 버튼을 눌러 소스코드를 다운로드 받은 후에, 압축을 해제하고 서버에 업로드 합니다. 그리고는 web 폴더내에 있는 viewer.html 문서를 브라우저에서 열어봅니다.
별다른 코딩없이 예제만 실행시켜봐도 웹상에서 바로 pdf 문서가 열리는 걸 확인할 수 있습니다.
iframe 으로 브라우저의 일부 영역에 pdf 문서를 표시하기
이제, 브라우저의 전체화면이 아니라, 내가 원하는 특정 영역에 내가 원하는 크기로 pdf 문서를 표시하기 위해서는 iframe 을 사용하면 됩니다.
|
1
|
<iframe src="web/viewer.html" style="width:600px; height:400px; border:1px solid blue;"></iframe>
|
cs |
iframe 을 사용하게되면 아래와 같이 내가 원하는 영역에 내가 원하는 크기로 pdf 문서를 표시할 수 있습니다.
iframe 을 사용하지 않을 수는 없을까?
브라우저의 보안정책 때문에 iframe을 사용하기 어려운 경우가 있습니다. 그럴때는 아래와 같이 코딩하면 가능합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0,maximum-scale=10,user-scalable=yes">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
</head>
<body>
<style>
#the-canvas {
border: 1px solid black;
direction: ltr;
}
</style>
<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>
<h1>PDF.js 데모</h1>
<canvas id="the-canvas"></canvas>
<script language = "javascript">
var url = 'sample.pdf'; // 표시하려는 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);
});
</script>
</body>
</html>
|
cs |
위 코드를 실행시키면 아래와 같이 브라우저 상에서 pdf 문서의 내용이 바로 표시되는 걸 확인할 수 있습니다. 이때, 기존과 다른점은 마치 이미지를 표시하듯이 pdf 뷰어의 메뉴가 없다는 것입니다. 메뉴없이 pdf문서를 바로표시하고자 할때가 있는데 이럴때 유용하게 사용할 수 있습니다.
물론, 메뉴표시는 옵션을 변경해서 가능합니다.
이상 웹상에서 pdf를 바로 볼 수 있는 pdf뷰어, pdf viewer 에 대해 알아봤습니다.
반응형
'IT공부방 > 개발환경,오픈소스' 카테고리의 다른 글
| 카카오 로그인 설정하기, Kakao API 이용한 로그인 구현, 카카오톡 로그인 PHP코드 (0) | 2023.07.12 |
|---|---|
| 웹상에서 엑셀파일 보기, 엑셀파일 보는 웹사이트 (0) | 2023.07.07 |
| 웹상에서 psd 파일 보기, 포토샵파일 뷰어, psd 파일 뷰어 (0) | 2023.06.28 |
| selectbox 라이브러리 selectric, 손쉽게 예쁜 selectbox 만들기 (0) | 2023.06.23 |
| 그누보드 아이디찾기, 비밀번호 찾기 이메일 발송 안될때 조치방법 (0) | 2023.06.15 |
댓글 영역