Membuat PDF Reader Untuk Website Dengan Flexpaper

Dengan semakin majunya era digital, hampir semua dokumen bisa dapatkan secara online. seperti Google Docs, Scrib dan lain-lain. Tapi jika kita ingin mempublish dokumen ke website pribadi atau perusahaan secara internal (menggunakan server sendiri) ada beberapa tools yang berguna sebagai reader online. Ada yang berbayar maupun yang opensource.

FlexPaper menyediakan Online Reader versi opensource. kita dapat merubah tampilan reader tersebut tapi tentunya tetap menampilkan logo FlexPaper.

Berikut sedikit penjelasan untuk mengaplikasikan FlexPaper ke website. Pertama-tama download paket FlexPaper player disini. Kemudian download swftool sebagai converter disini.

Pertama-tama convert dokumen PDF dengan menggunakan swftool.

Kemudian "Rendering mode" dirubah sesuai dengan kondisi file PDF apakah Text saja, atau kombinasi text dan gambar dll. Kemudian pilih menu "Edit" -> "Options" -> pilih tab "Viewer", pilih "no viewer" dan untuk flash version plih tergantung kebutuhan.

Klik OK, kemudian tekan Ctrl + W untuk menyimpan semua halaman ke sebuah file swf. sebagai contoh file ini disimpan dan diberi nama KhasiatTanamanobat.swf.

Sekarang pemasangan di halaman web pertama-tama tambahkan library flexpaper yang ada dalam paket FlexPaper (flexpaper_flash.js) kedalam head.

kemudian rubah script untuk memanggil modul flexpaper beserta dokumen tambahkan script berikut di dalam body Tag HTML, tentunya diletakan sesuai kebutuhan.

         <script type="text/javascript"> 
    var fp = new FlexPaperViewer( 
       'FlexPaperViewers',
       'viewerPlaceHolder', { config : {
       SwfFile : escape('KhasiatTanamanobat.swf'),
       Scale : 0.6, 
       ZoomTransition : 'easeOut',
       ZoomTime : 0.5,
       ZoomInterval : 0.2,
       FitPageOnLoad : true,
       FitWidthOnLoad : false,
       FullScreenAsMaxWindow : false,
       ProgressiveLoading : false,
       MinZoomSize : 0.2,
       MaxZoomSize : 5,
       SearchMatchAll : false,
       InitViewMode : 'Portrait',
       PrintPaperAsBitmap : false,
       PrintToolsVisible : false, 
       ReadOnly : true,
       PrintEnabled : false,
       
       
       ViewModeToolsVisible : true,
       ZoomToolsVisible : true,
       NavToolsVisible : true,
       CursorToolsVisible : true,
       SearchToolsVisible : true,
        
         localeChain: 'en_US'
       }});
         </script>

pada baris ke-5 SwfFile diisi lokasi dokumen swf yang telah dibuat tadi. Untuk contoh karena berada dalam satu direktori makan cukup nama file saja.

berikut versi lengkap HTML-nya :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
    <head> 
        <title>FlexPaper</title>         
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <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:10px;top:10px;">
         <a id="viewerPlaceHolder" style="width:680px;height:480px;display:block"></a>
         
         <script type="text/javascript"> 
    var fp = new FlexPaperViewer( 
       'FlexPaperViewers',
       'viewerPlaceHolder', { config : {
       SwfFile : escape('KhasiatTanamanobat.swf'),
       Scale : 0.6, 
       ZoomTransition : 'easeOut',
       ZoomTime : 0.5,
       ZoomInterval : 0.2,
       FitPageOnLoad : true,
       FitWidthOnLoad : false,
       FullScreenAsMaxWindow : false,
       ProgressiveLoading : false,
       MinZoomSize : 0.2,
       MaxZoomSize : 5,
       SearchMatchAll : false,
       InitViewMode : 'Portrait',
       PrintPaperAsBitmap : false,
       PrintToolsVisible : false, 
       ReadOnly : true,
       PrintEnabled : false,
       
       
       ViewModeToolsVisible : true,
       ZoomToolsVisible : true,
       NavToolsVisible : true,
       CursorToolsVisible : true,
       SearchToolsVisible : true,
        
         localeChain: 'en_US'
       }});
         </script>
        </div>
        
   </body> 
</html>

berikut contoh untuk hasil dari dokumen PDF Khasiat Tanaman Obat

Karena apllikasi ini opensource maka bisa di edit sesui kebutuhan, jika akan melakukan pengeditan pada FlexPaper player silihkan download Flexpaper SDK disini dan edit menggunakan Adob Flex 3. Jika ingin melakukan demo sendiri disarankan memiliki webserver sendiri dengan menginstall XAMPP atau WAMP agar dapat melihatnya.

Kang Safiq

28 June 2015

Membuat PDF Reader Untuk Website Dengan Flexpaper