PDF.js 간단한 사용법 - web상에서 pdf파일 보기

PDF파일을 웹상에서 볼 수 있도록 만들기 위해 pdf 뷰어를 찾아다녔다. 

각 브라우저별로 PDF 뷰어를 지원하기 때문에 그냥 띄워도 되긴 하지만 뭐랄까 공통된 UI와 조금 더 다양한 기능들을 지원하는 걸 필요로 해서... 찾게 되었다.

찾다보니 PHP기반의 뷰어도 있고, 뭔가 여러가지 뷰어들이 있었는데 개인적으로 그나마 적용하기 가장 깔끔하고 쉬워보이는 PDF.js 를 사용하기로 했다. (무언가 이름부터도 이보다 더 직관적일 수 없을 것 같은 느낌.)

주소는: https://mozilla.github.io/pdf.js/

파일을 다운받아서 보면 아래와 같이 구성되어 있다.

web폴더로 들어가면 실제 호출하게될 viewer.html파일 및 기타 파일들을 볼 수 있다.

사용법을 찾아보니 굳이 커스터마이징할 것 없이 그대로 사용 가능하길래 사용법 그대로 따라해 보았다.

1. web폴더에 pdf파일 넣기.

2.코드 작성. web폴더에 있는 pdf파일 연결 → web/viewer.html?file=samplepdf.pdf

<a href="web/viewer.html?file=samplepdf.pdf">view</a>
<br>
<iframe src="web/viewer.html?file=samplepdf.pdf" style="width:500px; height:300px; border:1px solid #00c;"></iframe>

3. 냅다 실행. 그리고 결과는??

안뜬다...

그래서 바로 크롬에서 f12를 눌러서 확인해보니 

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

요런 문구와 함께 에러가 발생하고 있었다. 또 무언가 처음 접해보는 형태다. 다시 구글링.

찾아보니 에러 원인은 로컬상태에서 실행하니까 지원되지 않는다는 것이다.

즉, 서버를 통해서 구동하면 된다. 

서버 폴더에 파일들을 옮기고 서버주소로 접속하니 아래와 같이 정상적으로 화면이 출력된다. 

앞서 언급했듯이 브라우저별로 뷰어를 제공하긴 하는데 UI가 제각각이다. 

그래도 이왕 적용하기로 한 것 간단하게 비교하는 것으로 마무리 하겠다.

<IE11>

<Chrome>

<PDF.js 적용>

바로가기: PDFObject와 PDF.js를 사용하여 Dropdownlist 만들기