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.