Javascript PDF: Generate file PDF dengan jsPDF

 Author : hadinug, 01 December, 2014, Komentar

Sistem informasi berbasis web maupun desktop, biasanya menyediakan sebuah library atau fungsi pada sebuah program untuk mengenerate sebuah laporan, baik itu berupa file PDF, document maupun tabular seperti XLS. Nah sebagai seorang developer web pastinya kita sudah sering bekerja dengan beberapa librari PDF, baik berbasis PHP maupun yang lain nya.


Kali ini kami akan mencoba menuliskan bagaimana membuat sebuah file PDF yang merupakan hasil generate program dengan javascript, salah satunya adalah JSPdfJSPdf menyediakan API untuk menghasilkan file PDF on-the-fly menggunakan JavaScript.



API ini didukung oleh semua browser HTML5 (IE6 + *, Firefox 3+, Chrome, Safari 3+, Opera). Langsung saja unduh librari JSPDF terbaru dari https://github.com/MrRio/jsPDF/zipball/master 


Sintak sederhana bagaimana mengenerate file PDF dengan javascript:

//example1
var doc = new jsPDF();
doc.setFontSize(20);
doc.text(30, 30, 'My First PDF');
doc.addPage();
doc.setFontSize(14);
doc.text(30, 30, 'Hello world, can you hear me!.');


Berikut list API yang bisa digunakan untuk mengenerate file PDF dengan javascript

- Memanggil class PDF

//Create PDf
var doc = new jsPDF();

 - Memanggil class PDF dengan model kertas landscape

//Create Landscape PDF
var doc = new jsPDF('landscape');

- Menyimpan dokumen pada url tertentu

//Saving docment using data-uri
doc.save('out.pdf')

- Mendapatkan output file

//get the PDF buffer
doc.output() 

- Mangatur property 

//Set PDF properities

doc.setProperties({
    title: 'PDF Title',
    subject: 'This is the subject',     
    author: 'hadinug.net',
    keywords: 'pdf, javascript,geenerated',
    creator: 'hadinug'
});

- Mangatur tipe, ukuran dan jenis font 

//Set Font type,size & details
doc.setFont("times");
doc.setFontType("italic");
doc.setFontSize(16);

- Manambahkan text pada file PDF 

//Add text to pdf
doc.text(X,Y, 'This is courier bolditalic.'); //X,Y are the position

- Mangatur warna text 

//Change Text color
doc.setTextColor(150);

- Manambahakan halaman baru 

//Adding a page
doc.addPage();

- Menambahakan garis 

//Adding a Line
doc.setLineWidth(0.5);
doc.line(X1, Y1, X2, Y2); // horizontal line

- Menggambar 

//Draw Rectangle
doc.setDrawColor(0);
doc.setFillColor(255,0,0);
doc.rect(X1, Y1, WIDTH, HEIGHT, 'F');  //F is for Fill
doc.rect(X1, Y1, WIDTH, HEIGHT, 'D');  //D is for Draw
doc.rect(X1, Y1, WIDTH, HEIGTH, 'FD');  //FD is for Fill and Draw 
 
//Draw Triangle
doc.setLineWidth(1);
doc.setDrawColor(255,0,0);
doc.setFillColor(0,0,255);
doc.triangle(X1, Y1, X2, Y2, X3, Y3, 'FD');//FD is for Fill and Draw


Librari JSPDF menghasilkan pdf di browser dan memberikan pilihan (menggunakan data-uri) untuk men-download. Tapi itu tidak bekerja pada semua browser. Anda dapat men-download PDF yang dihasilkan menggunakan plugin Downloadify.

Plugin Downloadify menyediakan pilihan untuk men-download file apapun (tidak hanya pdf).


Berikut contoh implementasi:

//'downloadify' merupakan id button untuk mentriger file PDF
//'Simple.pdf' merupakan ouput file.
Downloadify.create('downloadify',{
            filename: 'Simple.pdf',
            data: function()
            { 
                    var doc = new jsPDF();
                    doc.setFontSize(22);
                    doc.text(30, 30, 'FirstPage: My First PDF');
                    doc.addPage();
                    doc.setFontSize(16);
                    doc.text(30, 30, 'Hello world can you hear me!!.'); 
                return doc.output();
            },
            onComplete: function(){ alert('File sudah tersimpan!'); },
            onCancel: function(){ alert('Kamu membatalkan untuk menyimpan file.'); },
            onError: function(){ alert('Kesalahan terjadi!'); },
            downloadImage: 'images/download.png',
            swf: 'images/downloadify.swf',
            width: 100,
            height: 30,
            transparent: true,
            append: false
        });


Anda bisa mendowload source nya disini

 
Bagikan halaman ke sosial media
 
Tags :   jsPDF    javascript    pdf       

Tentang Penulis

writer hadinug
Web Developer di PT. Yafii Solusi Internasional

Link: http://ysi.co.id

   Komentar Anda