pdf 홈페이지에 임베드 하는 방법 / PDF 미리보기 기능

<a href="abc.pdf"></a>와 같은 방식으로 PDF를 링크를 걸면 디바이스에 따라 간혹 바로 보여지기도하고, 다운 받아지기도하는데 웹사이트에서 PDF 를 다운받지 않고 무조건 바로 볼수 있도록 (미리보기처럼) 하는 방법을 정리해보려고 한다.

 

첫번째 방법 : <object> 

object 태그를 이용한 방법이다. data="abc.pdf" 부분에 pdf 파일 경로를 입력하고,

파일이 로딩되는 동안 또는 로드가 되지 않는 동안에 보여질 내용을 <object></object>사이에 넣어주면 된다.

<object data="abc.pdf" type="application/pdf" width="100%" height="600px">
<p>파일 미리보기가 잘 안되신다면 아래 링크를 클릭하셔서 확인하세요. <a href="abc.pdf"></a></p>
</object>

 

두번째 방법 : <embed>

embed 태그를 사용해 pdf를 임베드하는 방식이다.가장 직관적인 방법이라 할 수 있겠다. 

embed 경로를 pdf 경로로 넣고,  type="application/pdf"를 넣어준다.

<embed src="abc.pdf" width="500" height="375" type="application/pdf">

 

위의 두 방법은 간혹 익스플로러에서 제대로 작동하지 않을때가 있다.

따라서 세번째 방식이 가장 적합한 것 같다.

 

 

세번째 방법 : 구글 드라이브를 활용한 <embed>

마치 구글드라이브에 업로드 하여 보여주는 듯한 효과로 브라우져에 상관없이 잘 작동한다.

경로를 https://drive.google.com/viewerng/viewer?embedded=true&url=PDF주소 로 넣어주면 된다.

<embed src="https://drive.google.com/viewerng/viewer?embedded=true&url=abc.pdf" width="100%" height="600">

 

 

 

 

 

(테스트를 위한 pdf)

pdf미리보기.pdf

0.22MB