flexpaper를 이용한 Online PDF Viewer 환경 구축 하기

by ·

flexpaper를 이용한 Online PDF Viewer 환경 구축 하기
작성자 : 서진우
작성일 : 2011-07-15
flexpaper는 PDF문서를 web page 상에서 바로 viewing하는 오픈 소스 웹 프로그램이다.
유사한 프로그램으로는 google docs가 있다.
google docs는 google 에서 제공하는 webpdf viewer엔진을 통해 PDF파일을 브라우저상에서
바로 확인할수 있다. 다만 webpdf viewer엔진은 google 에서 제공하는 시스템에 있고,
사용자는 해당 엔진 경로를 html 소스에 붙여 사용하게 된다.
그러므로 자신의 웹서버에 있는 pdf 파일이 google엔진이 있는 쪽에 복사가 되어진 후,
로딩하여, 다시 사용자 브라우저로 전송하기 때문에 속도 및 보안 측면을 고려
하면 사용하기 불편하다.
flexpaper는 자신이 가지고 있는 pdf 문서를 swftools를 이용하여 flash 포맷의 swf파일로
변환하여, 자신의 웹서버에 올려놓고,  이를 flash plugin 을 통해 직접 읽어드리기 때문에
속도나 보안 측면에서 google docs와 같은 web pdf viewer보다 효율적이라 볼수 있다.
사용방법은 아래와 같다.
http://flexpaper.devaldi.com/ 사이트에서 관련 솔루션을 다운 받는다.
wget http://flexpaper.googlecode.com/files/FlexPaper_1.4.5_flash.zip
wget http://www.swftools.org/swftools-2011-01-23-1815.tar.gz
swftools 설치
# tar xzvf swftools-2011-01-23-1815.tar.gz
# cd swftools-2011-01-23-1815
# ./configure –prefix=/usr/local/swftools
# make
# make install
pdf2swf 변환
# /usr/local/swftools/bin/pdf2swf <pdf file> -o <swf output file> -T <flash version>
# /usr/local/swftools/bin/pdf2swf webpdf.pdf -o webpdf.swf -f -T 9 -t -s storeallcharacters
# /usr/local/swftools/bin/pdf2swf webpdf.pdf -o webpdf%.swf -f -T 9 -t -s storeallcharacters
웹서버 특정 공간에 FlexPaper_1.4.5_flash.zip 압축 해제
# mkdir webpdf
# cd webpdf
# unzip FlexPaper_1.4.5_flash.zip
# mkdir docs
# vi view_pdf.html
———————————————————————————-
<html>
    <head>
        <style type=”text/css” media=”screen”>
                        html, body      { height:100%; }
                        body { margin:0; padding:0; overflow:auto; }
                        #flashContent { display:none; }
        </style>
                <script type=”text/javascript” src=”js/flexpaper_flash.js”></script>
    </head>
    <body>
        <div style=”position:absolute;left:0px;top:0px;”>
                <a id=”viewerPlaceHolder” style=”width:660px;height:480px;display:block”></a>
                <script type=”text/javascript”>
                                var fp = new FlexPaperViewer(  
                                                 ‘FlexPaperViewer’,
                                                 ‘viewerPlaceHolder’, { config : {
                                                 SwfFile : escape(‘docs/<? echo $filename; ?>’),
                                                 Scale : 0.6,
                                                 ZoomTransition : ‘easeOut’,
                                                 ZoomTime : 0.5,
                                                 ZoomInterval : 0.2,
                                                 FitPageOnLoad : true,
                                                 FitWidthOnLoad : true,
                                                 PrintEnabled : true,
                                                 FullScreenAsMaxWindow : false,
                                                 ProgressiveLoading : false,
                                                 MinZoomSize : 0.2,
                                                 MaxZoomSize : 5,
                                                 SearchMatchAll : false,
                                                 InitViewMode : ‘Portrait’,
                                                 ViewModeToolsVisible : true,
                                                 ZoomToolsVisible : true,
                                                 NavToolsVisible : true,
                                                 CursorToolsVisible : true,
                                                 SearchToolsVisible : true,
                                                 localeChain: ‘en_US’
                                                 }});
                </script>
        </div>
</body>
</html>
docs 디렉토리 내에 swf 문서 파일을 기록하고, 웹 브라우저 상에서..
http://domain/webpdf/view_pdf.html?filename=<swffile>.swf

블로그등에 Iframe을 통해 문서를 삽입하고자 할때 아래 구문을 참고 바람.

<iframe src=”http://domain/view_pdf.html?filename=product_con.swf&embedded=true” width=”650″ height=”500″ frameborder=0 allowTransparency=”true” style=”border:1 solid #999c70″></iframe>

하면 문서확인이 가능하다.
데모 :  http://blog.syszone.co.kr/2992

서진우

슈퍼컴퓨팅 전문 기업 클루닉스/ 상무(기술이사)/ 정보시스템감리사/ 시스존 블로그 운영자

You may also like...

페이스북/트위트/구글 계정으로 댓글 가능합니다.