개발이야기/개발

PDF.js

2016. 8. 19. 10:24
반응형

웹 개발을 하다보면 PDF파일을 컨텐츠로 올리는 경우가 많다.

PC에서는 일반적으로 아크로벳 리더가 설치되어있기때문에 웹 브라우저 상에서 자연스럽게 열리고, 

열린 파일을 보고 닫으면 되는데, 특별한 뷰어도 필요가 없다.


모바일에서는 조금 다른데, IOS 사파리의 경우 기본 뷰어가 있어서 자연스럽게 열리는데. 안드로이드는 별도의 앱으로 연결되게끔 되어있다.


이렇게 브라우저에서 보는건 상관없는데, 프로젝트를 하다보면 모바일웹을 앱으로 감싸서 보여줘야 할 경우가 있다.

사이트 자체를 팝업없이, 새창없이 레이어로 구성하면 되는데, 문제는 PDF의 경우 새창으로 보여주게 되면, 앱 외부로 새창이 허용되지 않는 앱의 경우 파일만 열리고, 뒤로가기나 아무런 반이 없는 경우 가 있다..(안드로이드의 경우 백버튼을 누르면 되기때문에 상관이 없다.)


이런저런 프러그인을 찾아봤는데, 사실 모바일에서 깔끔하게 지원되는 플러그인은 PDF.js 이게 눈에 띄는데,,


모질라사에서 개발한 플러그 인인데, 사용법도 쉽고 생각보다 가볍다


https://mozilla.github.io/pdf.js/#


사이트 들어가면 위의 Download 버튼을 눌러주면 소스를 다운받을 수 있다.


왼쪽 상단에 Stable (v1.4.20) 파란버튼을 클릭하면, pdfjs-1.4.20-dist.zip 이란 파일이 다운로드 된다.

압축을 풀어보면 Build폴더와 web이란 폴더가 들어있다.

위의 두 폴더를 사이트 아무경로에 업로드 시킨다.


아래는 웹이란 폴더에 들어가면 보이는 화면이다.

우리가 사용할 파일은 viewer.html 파일인데, 

/web/viewer.html?file=PDF파일경로

보내주면 뷰어에서 정상적으로 보여질 것이다.

주의할 점은 사이트 url풀 path로 할 경우 에러가나서, 내부 경로로 지정을 해줘야지 된다.

적용된 모습이다. 군더더기 없는 기능들이고, html파일을 수정하여 기능들을 가감할 수 있다.





반응형

작성자

Posted by 구르는石

공유

댓글