간단하게 Height 100%로 PDF viewer 만들기(PDFObject)

HTML에 PDF viewer를 적용하려고 여러 글을 찾아보는데

대부분의 예제마다 Height는 px로 고정되어 끄트머리가 비게 되는 현상이 발생했다.

 

여느 방법을 적용해도 height 100을 만족시키는 코드가 없었음 ㅠㅠ 

 

 

 

예시 1. style="height:800px; 줄 경우,

height가 px로 고정되어 있기때문에 viewer가 예쁘게 표출안됨

 

 

 

예시 2. style="height:100%; 를 줄경우,

아에 제 기능못함

 

 

 

 

화면에 맞게, 딱맞는 pdf 뷰어를 만들기 위해서는, 미디어 쿼리를 적용해야한다는 해결방안이 있었음.

(근데 알겠지만, 반응형웹에 사용되는 미디어쿼리란 100%를 맞출수 없음 ㅠㅠ)

 

 

 

 

그래서 찾은 해결 방법

 

 

원하는 개발 방향은

- 화면 전체에 PDF 표출

- height는 100%를 만족 

- pdf에 여러 메뉴를 제공

 

 

우선, html에 pdf를 표출하기 위한 방법으로는 다양한 방법이 있음. 자세한 구현 방법 및 제약사항은 구글링

1. PDFObject.js 

2. PDF.js

3. iframe 

4. embed

 

 

PDFObject를 적용한 코드

PDFObject.js sample.zip

0.79MB

 

 

 

 

 

압축 해제후, index.html를 실행

(body에는 깔끔한 디자인을 위해 sytle을 추가하였으니, 필요에 따라 제거하면 됨.)

 

 

 

다 하고 나서 드는 생각이지만

아마 예시2와 같이 표출될 경우, style="position:absolute;" 를 추가해준다면 제대로 표출 될것같다. 퇴근전 부랴부랴 작성하는 해결책ㅠㅠ끗