• JS
  • PHP

PDF.JS를 이용하여 모든브라우저/디바이스에서 PDF를 작동하게 하는 소스

2018-12-19 498

설명

  • 카카오톡 링크

PDF.JS를 이용하여 모든브라우저/디바이스에서 PDF를 작동하게 하는 소스입니다.
기존에는 a 태그에다가 href="pdf경로" 를 입력하게 되면 어떤브라우저에서는 안열리고, 디바이스에서는 그냥 다운만 되고 안열리는 것을 확인 하실 수 있을겁니다.!
[특히 암호화된 pdf 파일명을 사용하는 업체라면 더더욱]
해당소스를 사용하시게 되면 모든 브라우저/디바이스 에서 작동되는것을 확인하였습니다.(안되는 브라우저 있으면 알려주세요[참조2번을 클릭했을 경우에만!])

(참조1)
해당태그는 일반적인 a 태그에다가 링크를 걸어서 보여지게 하는 소스입니다.
하지만 디바이스 / 특정브라우저에서는 열리지않는 현상을 발견하실 수 있습니다.

(참조2)
해당태그는 PDF.JS를 이용하여 모든브라우저/디바이스에서 작동되게끔 하는 소스입니다.[브라우저 체크/디바이스체크(안드로이드, 사파리)] 완료되었습니다

(사용법)
1. 일단 https://mozilla.github.io/pdf.js/ 해당사이트에서 소스를 다운받습니다.
2. 원하시는곳에 폴더를 옮기고서 밑에 있는 주석 중 [pdf_view.php 내용] 을 찾아서 원하는 곳에 pdf_view.php 를 작성하고 내용을 넣습니다.
3. [주의사항] PDFJS_URL 같은경우 해당경로를 입력을 잘해주셔야 합니다! source 폴더안에 pdf폴더를 넣어놨기 때문에 /source/pdf/web/viewer.html 이렇게 작성하였습니다.
4. 소스에 있는 [참조2] 를 보시게 되면 a href="/source/pdf_view.php?link=/data/pdf/test.pdf" 이런식으로 되어있습니다.
5. pdf_view.php 를 넣은곳을 a href 안에 입력해주시면 되겠습니다. 저는 source 폴더 안에 넣어놨기때문에 href="/source/pdf_view.php?link=/data/pdf/test.pdf" 이렇게 작성하였습니다.
6. 뒤에 있는 link 에 대해서 궁금해 하실텐데, link 는 pdf의 경로입니다 소스에 있는 [참조1] 번을 참고하시면 될것같습니다.~!
(위에것을 따라했는데 안되시면 https://open.kakao.com/o/gjEHaU7 여기에서 오셔서 물어보시면 됩니다~!)

유의사항
- 로컬에서는 작동하지않습니다.(02.15)

소스실행 현황

소스보기( X표시가 나타나면 무시하셔도 됩니다! )

<script type="text/javascript" src="/js/pdfobject.min.js"></script>
<div class="test_box">
	<a href="/data/pdf/test.pdf" target="_blank">pdf.js 를 안먹힌 a태그(참조1)</a>
</div>
<div class="test_box" style="margin-top:15px;">
	<a href="/source/pdf_view.php?link=/data/pdf/test.pdf" target="_blank">pdf.js 를 적용한 a태그(참조2)</a>
</div>

<!-- pdf_view.php 내용 -->
<?php
	$url =  $_GET['link'];
?>
<style>
	* {padding:0; margin:0}
	#pdf {height:100%}
</style>
<!-- <div id="results" class="hidden"></div> -->
<div id="pdf"></div>


<script src="/js/pdfobject.min.js"></script>
<script type="text/javascript">
	var options = {
		pdfOpenParams: {
			navpanes: 0,
			toolbar: 0,
			statusbar: 0,
			view: "FitV",
			pagemode: "thumbs",
			page: 0
		},
		forcePDFJS: true,
		PDFJS_URL: "/source/pdf/web/viewer.html"
	};

	var url = '<?= $url ?>';
	var myPDF = PDFObject.embed(url, "#pdf", options);

</script>