PDF를 웹에서 볼 수 있는 Javascript PDF.js

PDF를 웹(WEB)에서 바로 볼 수 있게

WEB에서 PDF 링크를 실행했을 때, 브라우저에서 바로 볼 수 있습니다. 하지만 모바일에서는 다운로드가 되고, 아이폰에서는 제대로 볼 수 없는 현상이 있습니다. 저는 개인 포트폴리오를 웹 링크로 전송하는데, 받는 사람의 디바이스 환경에 따라서 제대로 못 보는 경우가 많았습니다.

제가 원했던 건 딱 하나였습니다. 디바이스 크게 상관없이 그냥 보여줬으면 좋겠다!! 였습니다. 오늘 퇴근길에 문득 웹에서 볼 수 있는 PDF 뷰어로 구성하면 되잖아?! 라는 생각이 들었습니다. 하아.. 제 포트폴리오를 웹 링크로 배포한 지가 몇 년째인데, 인제야 이런 생각을 하다니. 못난놈.

검색을 좀 해 보니 Javascript를 이용한 여러 가지 플러그인이 존재했지만, 크게 손대지 않고 거의 바로 적용 가능한 PDF.js를 소개하면서 간단한 사용법을 정리합니다.

PDF.js

아주 간단하게 공식 홈페이지에서 소스 전체를 다운받을 수 있습니다. 다운받은 파일의 압축을 풀고 웹에 업로드 후, 파일명만 변경해주면 바로 데모 페이지처럼 볼 수 있습니다. 다운받은 후 압축을 풀면 아래와 같은 구조를 볼 수 있습니다.

├── build/
│   ├── pdf.js                             - display layer
│   ├── pdf.js.map                         - display layer's source map
│   ├── pdf.worker.js                      - core layer
│   └── pdf.worker.js.map                  - core layer's source map
├── web/
│   ├── cmaps/                             - character maps (required by core)
│   ├── compressed.tracemonkey-pldi-09.pdf - PDF file for testing purposes
│   ├── debugger.js                        - helpful debugging features
│   ├── images/                            - images for the viewer and annotation icons
│   ├── locale/                            - translation files
│   ├── viewer.css                         - viewer style sheet
│   ├── viewer.html                        - viewer layout
│   ├── viewer.js                          - viewer layer
│   └── viewer.js.map                      - viewer layer's source map
└── LICENSE

여기서 수정을 해줘야 하는 파일은 viewer.js 파일입니다. 에디터로 열어보시면 4,353줄에 샘플로 함께 들어있는 PDF 파일명이 보입니다.