개발이야기/개발

PDF.js

2016.08.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 구르는石

공유

태그

태그 , , , ,

댓글 6

  • 댓글 영역

    프로필 사진
    2017.02.28 10:03

    비밀댓글입니다

    • 댓글 영역

      프로필 사진
      2017.02.28 10:14 신고

      pdf.js는 pdf파일을 웹브라우저의 자동viewer가 아닌,
      모질라 사에서 제공 해 주는 pdf.js라는 뷰어를 이용해서 보여주는것입니다.
      질문자 분께서 실제 FTP를 이용해서 웹을 개발하시는 분이 아니시라면 사용하실 수 없습니다.

      조금 예를 들어서 설명을 하자면

      www.test.co.kr이라는 사이트를 기준으로

      www.test.co.kr/web/ 이란 폴더에 위의 파일을 업로드 해 놓으시고요.

      pdf파일을 업로드 하시는 경로가 아래와 같다면,
      www.test.co.kr/upload/

      위의 경로에 test.pdf란 파일을 업로드 하시면 아래의 경로로 보이실 겁니다.
      www.test.co.kr/upload/test.pdf

      해당 pdf를 보여주는 페이지에서
      www.test.co.kr/web/viewer.html?file=/upload/test.pdf
      (file쪽의 파라미터를 사이트 내 상대 경로로 주셔야합니다.)

      위의 경로로 새창을 열어주시면 업로드하신 test.pdf파일이 뷰어를 통하여 보이게 됩니다.
      적절한 답변이 되었는지 모르겠네요.
      더 궁금하신점 있으면 질문주세요 ^^

    • 댓글 영역

      프로필 사진
      2017.03.02 14:48

      비밀댓글입니다

    • 댓글 영역

      프로필 사진
      2017.03.02 15:16 신고

      사실 무료로 제공해주는 플립 형태의 솔루션은 저도 잘 모르겠습니다.

      http://www.nomadism.co.kr/21

      제 포스팅 보시면 저는 flipHtml5라는 솔루션을 이용해서 사용 해 왔습니다.
      플래시 버전은 무료로 제공해 주는곳이 꽤있어보이는데, Html용은 저도 못찾아서 위의 솔루션을 결재하였습니다.
      자동으로 컨버팅은 안되고, 일단 만든 후 html방식으로 퍼블리싱 해서 경로를 참조하는 방식으로 사용하였습니다.

  • 댓글 영역

    프로필 사진
    2017.03.06 10:14

    비밀댓글입니다

    • 댓글 영역

      프로필 사진
      2017.03.06 10:26 신고

      사실 저도 사용은 해 보지 않아서 정확하진 않지만, 구글링 해보니 위와같은 답변이 있네요. 참고해서 사용해 보시면 될거같습니다.

      http://stackoverflow.com/questions/17547956/how-to-make-pdf-undownloadable-using-pdf-js