pdf파일을 웹사이트에서 보여주기

웹페이지에서 PDF를 보여주는 방법으로은 3가지 정도가 있다.

1. a태그를 이용해서 로컬 PC에 저장하여 웹 브라우저를 통해서 보여주는 방법

2. iframe 또는 object 태그를 이용해서 웹페이지로 보여주는 방법

<iframe src="pdf문서URL" style="height:100%;width:100%;"></iframe>

3. javascript 라이브러리를 이용하여 pdf파일을 웹페이지로 보여주는 방법

2번은 3번과 웹페이지내에서 PDF를 보여주는 방법으로 웹페이지내에서 PDF를 볼 수 있다는건 동일하지만
pdf 내부의 height값을 알 수 없는 상태에서는 iframe의 height크기를 변경할 수 없기 때문에 
사용하는데 문제점이 발생한다.

 

3번에 대한 코드 
codepen.io에서 소스를 보면 알겠지만 pdf파일에 대한 URL 또는 base64 인코딩한 DATA를 이용하여 
PDF문서를 웹페이지 내에서 볼 수 있도록 구현한 소스이다.

See the Pen pdfview by hulint (@hulint) on CodePen.

 

 

 

참고 : https://github.com/mozilla/pdf.js

이번에 word문서를 html로 변환하여 공개할지 pdf 채로 공개할지에 대한 의견이 있어서 간단하게 
pdf문서로 저장하여 웹페이지로 보여주면 좋지 않을까라는 생각에 구현해본 소스. 

pdf문서를 URL로 공유하기 위해서는 CORS 정책을 준수해야 한다.