자바스크립트 pdf 뷰어 ( pdf.js , pdfobject.js )

pdf.js 홈페이지 : http://mozilla.github.io/pdf.js/

pdfobject 홈페이지 : https://pdfobject.com/

각각의 홈페이지에서 js 파일이 다운로드 가능하며, 예제도 확인 가능하다.

둘중 하나만 사용해도 pdf뷰어로 사용은 가능하다.

pdfobject는 pdf.js를 사용하지 않으면 익스플로러(ie)에서는 작동이 불가능하다.

https://pdfobject.com/examples/pdfjs-forced.html

위의 주소에 예제와 같이 사용하여 구현했다.

우선 첫번째로 pdf.js 홈페이지에 접속하여 다운 받는다.

압축을 해제하여 프로젝트에 폴더를 통째로 업로드 한다.

( pdfjs/web/view.html 파일이 실제 pdf 뷰어 페이지이며, pdfjs폴더를 그대로 업로드시 변경해야 하는 부분은 없다.

  pdf를 보여주는 pdf.js 파일은 pdfjs/build/pdf.js 위치에 있다. )

두번째로 pdfobject.js 홈페이지에 접속하여 다운 받는다.

압축을 해제하여 폴더 안에 있는 pdfobject.js 파일과 pdfobject.min.js 파일을 

프로젝트에 업로드 한다. 

마직으로 pdf를 보여줄 html 페이지를 수정한다. 

아래의 style은 pdf 뷰어와 결과 텍스트를 보여주는 것이며, 자신에  맞게 수정하면된다.

<style> .pdfobject-container { width: 100%; max-width: 600px; height: 600px; margin: 2em 0; } .pdfobject { border: solid 1px #666; } #results { padding: 1rem; } .hidden { display: none; } .success { color: #4F8A10; background-color: #DFF2BF; } .fail { color: #D8000C; background-color: #FFBABA; } </style>

results는 결과를 뿌려주는 부분으로 필요에 따라 사용하면 된다.

지울 경우에는 아래의 script에서도 results 부분을 지워야 한다.

<div id="results" class="hidden"></div> <div id="pdf"></div>

위에서 업로드한 pdfobject.min.js 파일을 자신의 경로에 맞게 불러온다.

viewer.html 과 화면에 보여줄 pdf 파일의 경로를 알맞게 지정한다.

<script src="/resources/js/pdfobject.min.js"></script> <script> var options = { pdfOpenParams: { navpanes: 0, toolbar: 0, statusbar: 0, view: "FitV", pagemode: "thumbs", page: 2 }, forcePDFJS: true, PDFJS_URL: "/resources/pdfjs/web/viewer.html" }; var myPDF = PDFObject.embed("/resources/uploads/pdftest.pdf", "#pdf", options); var el = document.querySelector("#results"); el.setAttribute("class", (myPDF) ? "success" : "fail"); el.innerHTML = (myPDF) ? "PDFObject was successful!" : "Uh-oh, the embed didn't work."; </script>

위와 같이 수정을 한 후 실행하면 pdfobject홈페이지 예제와 같은 pdf 뷰어를 볼 수 있다.