PDF 드롭다운 - PDFObject와 PDF.js를 사용하여 Dropdownlist 만들기

일전에 PDF viewer를 찾다가 PDF.js를 찾은 적이 있다. 

브라우저에서 PDF 보기를 지원하지 않거나 통일된 UI로 쓰기에 좋겠다고 했었다.

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

여기에서 PDF파일을 하나만 사용한다면 그럭저럭 쓸만은 했는데 조금 더 욕심을 부려 복수 이상의 파일을 선택해서 보는 기능을 추가하고 싶었다. 

정확히는 드롭다운 리스트를 만들어서 선택한 PDF를 출력해주는 기능이었는데 혹시나 하고 찾아보니 역시나 있었다.

PDFObject라는 것으로 jQuery, JavaScript등 각각의 언어와 연계하여 PDF viewer를 제어할 수 있게 해주는 스크립트 파일이다.

PDF를 특정 페이지부터 열리도록 하거나 브라우저에서 PDF view를 지원하는지 여부를 감지하는 기능들이 구현되어 있다.

그리고 가장 마음에 드는 것은!!

특정 브라우저에서 PDF view를 지원하지 않아도 PDF.js와 연계하여 PDF를 출력할 수 있다는 점이었다.

포스팅 주제는 드롭다운으로 구현하는 것이기 때문에 간략히 적었지만 홈페이지에 가면 여러가지 기능들을 쉽게 따라할 수 있도록 정리되어 있으니 참고하시기 바란다.

PDFObject 사이트 바로가기: https://pdfobject.com/

PDFObject파일을 다운로드한 후 기존 PDF.js파일들이 있는 곳에 JS폴더를 만들어서 옮겨준 후 아래와 같이 코드를 작성하였다.

<div>
        <!-- 드롭다운 리스트 생성 -->
        <select onchange="javascript:pdf_read(this.value); " 
        style="height:35px; background:#1e1e1e; width:202px; color:#fff; border-left:1px solid #5d5d5d; 
        border-top:1px solid #5d5d5d; border-right:1px solid #5d5d5d; border-bottom:1px solid #1e1e1e;">
                <option value="pdf_1">SamplePDF1</option>
                <option value="pdf_2">SamplePDF2</option>
                <option value="pdf_3">SamplePDF3</option>
                <option value="pdf_4">SamplePDF4</option>                        
        </select>
</div>
 
<!-- PDF 출력 div -->
<div id="example1"></div>
 
<!-- PDFObject 스크립트 호출 -->
<script src="js/pdfobject.js"></script>
 
<!-- PDFObject 옵션 설정 -->
<script>
        var options = {
        height: "500px",
        page: '1',
        pdfOpenParams: {
                view: 'FitV',
                pagemode: 'thumbs',
                search: 'lorem ipsum'
        },
        
        forcePDFJS: true, // 강제로 PDF Viewer를 실행시키는 옵션
    PDFJS_URL: "/pdftest/web/viewer.html" //PDF.js의 PDF viewer를 viewer로 지정.
        };
 
        //제일 처음 열리는 pdf파일 경로 설정.
        PDFObject.embed("files/samplepdf.pdf", "#example1", options);
</script>
 
<!-- 드롭다운리스트에서 선택한 내용에 맞게 pdf파일을 호출하는 함수 작성 -->
<script>
        function pdf_read(file_path){                
                
                if (file_path == "pdf_1" ){
                        myPDF_viewer = PDFObject.embed("files/samplepdf.pdf", "#example1", options);            
                }
                else if (file_path == "pdf_2" ){
                        myPDF_viewer = PDFObject.embed("files/samplepdf2.pdf", "#example1", options);            
                }
                else if (file_path == "pdf_3" ){
                        myPDF_viewer = PDFObject.embed("files/samplepdf3.pdf", "#example1", options);            
                }
                else if (file_path == "pdf_4" ){
                        myPDF_viewer = PDFObject.embed("files/samplepdf4.pdf", "#example1", options);            
                }                
        }
        </script>
 
<!-- PDF viewer 스타일 지정 -->
<style>
        .pdfobject-container { height: 500px;}
        .pdfobject { border: 1px solid #666; }
</style>

위와 같이 코드를 작성하고 웹서버상에서 호출하면 아래 사진과 같이 드롭다운 메뉴를 통한 PDF파일 호출이 가능해진다.

다음은 몇가지 참고할만한 사항들이다.

코드 작성시 PDFObject만 단독으로 사용할 때와 PDF.js를 연동해서 사용할 때 참조 디렉토리가 다르다는 점에 주의해야 한다.

PDFObject 단독으로 사용할 경우는 디렉토리 참조위치가 웹에서 구동되는 html 파일의 위치다.

하지만 PDF.js와 연동할 때는 viewer.html 파일이 있는 폴더가 디렉토리 참조위치가 된다.

(파일 이동을 하지 않았다면 web폴더에 viewer.html 파일이 위치함.)

파일 호출 시 절대경로를 사용한다면 상관없지만 상대경로를 사용한다면 위치에 유의해야 한다.

PDFObject는 단독으로 사용할 경우, 브라우저에서 지원하는 viewer를 사용한다.

즉, 브라우저의 내장 viewer를 출력해주거나

지원되지 않을 경우, 아래와 같이 다운로드하라고 뜬다.