Inline PDF Viewer dengan PDFObject

PDFObject merupakan sebuah utility javascript untuk melakukan embedding file PDF ke dalam sebuah halaman HTML. Untuk informasi dan dokumentasi lebih detail bisa dilihat pada https://pdfobject.com

Inline PDF Viewer sangat membantu untuk memenuhi kebutuhan User Experience (UX) dimana user akan melakukan input pada sebuah form yang datanya dari hasil membaca sebuah document PDF yang berasal dari web tersebut juga.

Kebutuhan UX seperti ini sebenarnya bisa di penuhi dengan beberapa cara:

1. User mendownload file PDF. Membuka halaman form yang akan diisi pada browser. User akan melakukan Alt+Tab untuk berpindah-pindah antara browser dan aplikasi pembuka/viewer PDF (Adobe Reader, Foxit Reader, dll).
2. File PDF dibuka pada Tab di browser. User membuka halaman form yang akan diisi pada Tab lain di browser. User akan melakukan berpindah-pindah antara Tab file PDF dan Tab form pada browser.
3. Adanya fitur preview file PDF pada halaman form yang akan diisi. Jadi user bisa sambil melihat file PDF untuk langsung mencari data yang perlu untuk diisi ke form.

Untuk opsi no 1 dan 2, sudah bisa dilakukan tanpa menambahkan fitur apapun dalam web. Karena function basic dari web sudah bisa memenuhi kebutuhan flow ini. Tetapi user perlu bolak-balik antara 2 aplikasi berbeda (browser - pdf viewer) atau 2 tab yang berbeda pada browser.
Tetapi untuk no 3, kita perlu menambahkan fitur preview file PDF agar file PDF bisa langsung di preview di halaman yang sama dengan form yang akan diisi.

Berikut adalah sample UI nya:

Untuk sample kali ini struktur folder nya cukup simple, seperti berikut. Folder js saya isi dengan javascript dari github PDFObject.

Isi code dari index.html:

 
<h1>PDF Object Demo</h1>

<table>
 <tr>
   <td><label>Nama</label></td>
   <td>
     <input type="text" placeholder="nama">
   </td>
 </tr>
 <tr>
   <td><label>Alamat</label></td>
   <td>
     <input type="text" placeholder="alamat">
   </td>
 </tr>
 <tr>
   <td><label>Usia</label></td>
   <td>
     <input type="number" placeholder="usia">
   </td>
 </tr>
</table>

<div id="example1"></div>

<script src="/js/pdfobject.js"></script>
<script>PDFObject.embed("sample-3pp.pdf", "#example1");</script>

Cara penggunaan PDFObject ini sangat mudah. Apabila kita sudah memasukannya ke dalam project, maka kita tinggal menggunakan nya dengan code ini:

 
<div id="example1"></div>

<script src="/js/pdfobject.js"></script>
<script>PDFObject.embed("sample-3pp.pdf", "#example1");</script>

Terlihat pada code bahwa source file PDF nya adalah sample-3pp.pdf, bagian ini bisa kita pindah ke file controller jika kita menggunakan AngularJS pada project sehingga source file PDF nya bisa dinamis.

Pada sample ini saya menggunakan cara pintas dalam mengimport PDFObject kedalam project secara manual. PDFObject sendiri sudah tersedia pada Bower dan NPM, sehingga dependency management nya terjamin.

PDFObject ini sayang nya sudah tidak compatible dengan Firefox semenjak Firefox versi 52, hal ini di jelaskan oleh PDFObject pada website nya. Dijelaskan juga cara workaround agar PDF inline tetap berjalan di browser Firefox versi 52 ke atas. Workaround ini akan saya bahas pada postingan selanjutnya. :)