Creating PDF in Angular With JSPDF

 Hallo,

Pada kesempatan kali ini penulis akan mencoba menjelaskan bagaimana cara untuk membuat PDF pada JavaScript dengan menggunakan JSPDF. Apa itu JSPDF? JSPDF adalah Library dari JavaScript yang berguna untuk membuat atau men-generate PDF via client-side. Pada Kesempatan kali ini, penulis akan menggunakan Framework Angular 4 yang akan diimplementasikan dalam file .ts angular 4.

Install menggunakan NPM

Untuk angular tambahkan code dibawah di file angular-cli.json

Import JSPDF seperti gambar dibawah.

Lalu dapat dibuat struktur seperti ini

Perlu diperhatikan, object ‘doc’ ini yang akan dijadikan PDF nantinya, dan jika tidak mau PDF berbentuk landscape, tinggal hilangkan ‘orientation: ‘landscape’’ nya saja. Code.text digunakan untuk menuliskan text biasa pada PDF tersebut. Format tersebut dapat dijabarkan seperti ini: namaObject.text( textnya, width, height); Untuk code.save digunakan untuk menyimpan PDF tersebut ke local. Format tersebut dapat dijabarkan seperti ini: namaObject.save( nama_pdf.pdf );

Untuk pembuatan Line dapat menggunakan codedibawah

Untuk pemberian gambar dengan code dibawah

Untuk file image harus berbentuk base64 baru bias di print pada pdf.

Untuk pembuatan PDF ini harus diawali dengan code ‘var nama_object = new jsPDF();’

Dan diakhiri dengan ‘nama_doc.save(‘nama_pdf.pdf);’ untuk saving PDF tersebut.

Demikian yang bisa penulis jelaskan. Mohon maaf jika bahasa yang digunakan penulis sulit untuk dimengerti.

Terimakasih.

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. :)

Jasper Report - Table from List Java

Pada kesempatan yang lalu saya pernah membahas mengenai penggunaan jasper pada java yang dapat dibaca di sini. Disana saya sudah menjelaskan mengenai bagian- bagian yang terdapat pada jasper. Serta bagaimana penggunaanya pada java

Pada kesempatan beberapa waktu saya berkesempatan bermain kembali dengan jasper dan masih menggunakan java untuk penggunaannya. Pada kesempatan kali ini saya akan memberikan contoh penggunaan jasper menggunakan table dengan javabean datasource.

Table tentunya merupakan bagian yang sering ada pada report. Jasper tentunya juga support dengan fitur ini. Penggunaan table pada jasper sebenarnya sangat mudah apabila menggunakan datasource karena sudah ada wizard untuk hal tersebut. Maka dari itu saya tidak akan membahas penggunaan table pada jasper menggunakan datasource melainkan menggunakan java.

Apabila sebelumnya dengan mengirim list sebagai JRDataSource dan langsung dapat digunakan pada detail band. Untuk menggunakan list pada table data dalam bentuk JRDataSource perlu dikirim sebagai bagian dari param.

Mari kita siapkan template reportnya.

• Buat parameter pada report dengan nama ObjectDataSource dan Class : net.sf.jasperreports.engine.data.JRBeanCollectionDataSource

• Membuat sebuah datasource yang akan digunakan pada table ( bisa langsung ketika config tablenya juga )
  
  
•  Ambil table dari pallet dan menjalankan wizardnya seperti berikut

• Membuat field pada datasource yang digunakan untuk table tersebut sesuai dengan object java kita.

• Tata dalam table.

   

• Setelah selesai saya membersihkan band yang ada pada report dan hanya menyisakan band title dan detail saja. Berikut struktut akhir dari template yang digunakan

Berikut adalah cara pemanggilan reportnya untuk pembuatan report dalam format pdf dari java.

    List<SimpleReportVO> detail = new ArrayList<>();    
    SimpleReportVO data1 = new SimpleReportVO();    
    data1.setName("Roti Tawar");    
    data1.setPrice(1000);
    detail.add(data1);
    String dest = "D://report/report.pdf";    
    String template = "D://report-template.jasper";
    try{
        JRDataSource ds = new JRBeanCollectionDataSource(detail);
        HashMap params = new HashMap();
        params.put("ObjectDataSource", ds);        
        JasperPrint jp  = JasperFillManager.fillReport(template ,
                params, new JREmptyDataSource());
        JasperExportManager.exportReportToPdfFile(jp, dest);
    }catch (Exception e){
        logger.info(e.getMessage());    
    }

Object Java : 

import lombok.Data;

@Data
public class SimpleReportVO {
    private String name;
    private int price;}

Hasil darinya seperti berikut :

Demikian cara penggunaan table pada jasper report dari list java. Semoga berguna..
Sampai bertemu di kesempatan berikutnya.
Happy Coding :)