Cara Mencetak Halaman Website Menjadi PDF Menggunakan Jquery Simpel dan Mudah
Programming
Halo sobat teknisi, apa kabar? Semoga semua dalam keadaan baik-baik saja. Setelah sekian lama tidak memposting artikel baru akhirnya dapat terselesaikan juga. Bahkan pada kesempatan kali ini akan saya buka label baru dengan nama ‘Programming’.
Akhir-akhir ini format dokumen pdf sangat familiar, seiring berkembangnya aplikasi web yang membutuhkan percetakan data. Awalnya, format file pdf dikembangkan oleh Adobe System yang kemudian menjadi format file standar terbuka. Format file PDF tidak bergantung pada hardware, Operating System, dan juga aplikasi yang digunakan sehingga layout yang sudah tercetak dalam format pdf akan tetap sama tampilannya jika dibuka pada software lainnya.
Pada kesempatan kali ini akan dibahas mengenai “Cara Mencetak Halaman Website Menjadi PDF Menggunakan Jquery Simpel dan Mudah”.
Apa itu jQuery?
jQuery adalah library JavaScript yang dibuat oleh John Resign pada tahun 2006. Tujuan dari diciptakannya library JavaScript (jQuery) ini untuk memudahkan para developer dalam menerapkan JavaScript di website. Jqeury bukanlah sebuah bahasa pemrograman sendiri namun jQuery merupakan sekumpulan dari JavaScript yang dijadikan dalam satu wadah yang dinamai jQuery.
Praktek kali ini membutuhkan web server pada laptop, bisa menggunakan XAMPP, sebelum ke langkah eksekusi sebaiknya Sobat persiapkan bahan-bahannya terlebih dahulu, link sudah saya siapkan di bawah ini
- jQuery.min.js => https://jquery.com/download/
- printThis.js => https://jasonday.github.io/printThis/
Jika bahan sudah terdownload semua, maka kurang lebih nanti susunan direktori file nya akan seperti ini
- print-webpage-with-jQuery (nama folder)
- style.css
- jQuery.min.js
- printThis.js
- index.html
Setelah itu semua mari kita mulai untuk ngoding alias langkah eksekusi.
1. Buat folder baru pada htdocs milik Sobat sesuai dengan yang sudah direncanakan di atas tadi, untuk file awal cukup jQuery.min.js dan printThis.js saja ya Sobat. Karena file selain itu kita belum membuatnya,
2. Buka aplikasi kode editor kesayangan Sobat, lalu buat dua file baru dan beri nama style.css, index.html
3. Buka XAMPP Control Panel dan nyalakan service Apache, lalu ketikkan pada web browser localhost/print-webpage-with-jQuery (sesuai nama folder yang tadi Sobat buat)
Lhoh ko hasilnya kosongan tidak terjadi apa-apa? sabar tenang dulu kita, jika sudah sampai pada tahap ini kita yang kita buat hanya membuat folder nya saja. lanjutkan sampai step terakhir ya Sobat.
4. Kembali pada kode editor dan pilih index.html tambahkan script html kurang lebih seperti contoh di bawah ini
<!DOCTYPE html><html><head> <title>Print dengan Jquey</title> <!-- import css --> <link rel="stylesheet" type="text/css" href="style.css"></head><body>
<div class="container"> <h2 class="judul-tengah">Tes print menggunakan jquery</h2> <form> <p> <label>Nama</label> <input type="text" name="" class="inputan border-bottom"> </p> <p> <label>Email</label> <input type="email" name="" class="inputan border-bottom"> </p> <p> <label>No. Telepon</label> <input type="text" name="" class="inputan border-bottom"> </p> <p> <label>Alamat</label> <textarea name="" rows="5" class="inputan border-bottom"></textarea> </p> </form> </div> <div class="btn"> <button id="print" class="print-button">Print hamalaman ini</button> </div>
<!-- include jquery.min --> <script src="jquery-3.2.1.min.js"></script> <!-- include library printThis.js --> <script src="printThis.js"></script> <!-- langkah eksekusinya di bawah ini --> <script> $('#print').click(function() { $('.container').printThis({ debug: false, // show the iframe for debugging importCSS: true, // import parent page css importStyle: false, // import style tags printContainer: true, // print outer container/$.selector loadCSS: "http://localhost/style.css", // path to additional css file - use an array [] for multiple pageTitle: "", // add title to print page removeInline: false, // remove inline styles from print elements removeInlineSelector: "*", // custom selectors to filter inline styles. removeInline must be true printDelay: 333, // variable print delay header: null, // prefix to html footer: null, // postfix to html base: false, // preserve the BASE tag or accept a string for the URL formValues: true, // preserve input/form values canvas: false, // copy canvas content doctypeString: '<!DOCTYPE html>', // enter a different doctype for older markup removeScripts: false, // remove script tags from print content copyTagClasses: false, // copy classes from the html & body tag beforePrintEvent: null, // callback function for printEvent in iframe beforePrint: null, // function called before iframe is filled afterPrint: null // function called before iframe is removed }); }) </script>
</body></html>Save dengan nama index.html
Untuk lebih jelasnya mengenai syntax di atas akan saya perjelas satu persatu
<title>Print dengan Jquey</title>Digunakan untuk memberi title pada halaman tab yang dibuka
<link rel="stylesheet" type="text/css" href="style.css">Syntax mengimport CSS, sesuaikan dengan nama filenya jika salah dalam memanggil nama maka CSS tidak akan dapat terload
<div class="container"> <h2 class="judul-tengah">Tes print menggunakan jquery</h2> <form> <p> <label>Nama</label> <input type="text" name="" class="inputan border-bottom"> </p> <p> <label>Email</label> <input type="email" name="" class="inputan border-bottom"> </p> <p> <label>No. Telepon</label> <input type="text" name="" class="inputan border-bottom"> </p> <p> <label>Alamat</label> <textarea name="" rows="5" class="inputan border-bottom"></textarea> </p> </form> </div>Pada bagian ini adalah area yang nantinya akan dibuat PDF yang dibungkus dengan tag div container, semua tag yang terbungkus akan masuk dalam tampilan PDF
<div class="btn"> <button id="print" class="print-button">Print hamalaman ini</button></div>Ini adalah untuk membuat button yang nantinya apabila button tersebut di clik akan memunculkan pop-up untuk mengatur format PDFnya. Yang paling vital adalah tag button id="print", id yang bernama print nantinya akan dipangil dalam javascript untuk melakukan cetak PDF
<script src="jquery-3.2.1.min.js"></script>
<script src="printThis.js"></script>Syntax ini fungsinya untuk memanggil library jQuery dan printThis
<script> $('#print').click(function() { $('.container').printThis({ debug: false, // show the iframe for debugging importCSS: true, // import parent page css importStyle: false, // import style tags printContainer: true, // print outer container/$.selector loadCSS: "http://localhost/style.css", // path to additional css file - use an array [] for multiple pageTitle: "", // add title to print page removeInline: false, // remove inline styles from print elements removeInlineSelector: "*", // custom selectors to filter inline styles. removeInline must be true printDelay: 333, // variable print delay header: null, // prefix to html footer: null, // postfix to html base: false, // preserve the BASE tag or accept a string for the URL formValues: true, // preserve input/form values canvas: false, // copy canvas content doctypeString: '<!DOCTYPE html>', // enter a different doctype for older markup removeScripts: false, // remove script tags from print content copyTagClasses: false, // copy classes from the html & body tag beforePrintEvent: null, // callback function for printEvent in iframe beforePrint: null, // function called before iframe is filled afterPrint: null // function called before iframe is removed }); })</script>Script JavaScript di atas adalah nyawa dari program yang kita buat, jika diartikan dalam bahasa manusia akan seperti ini "jquery tolong carikan id yang bernama print lalu jalankan fungsi di bawah ini". Untuk memanggil CSS isikan pada "loadCSS" isikan alamat direktori penyimpanannya.
Eitts, belum selesai yaa... masih ada style.css yang belum kita buat, untuk css ini sifatnya custom ya sesuai dengan kebutuhan Sobat masing-masing
5. Kembali pada kode editor dan pilih style.css tambahkan script html kurang lebih seperti contoh di bawah ini
*,*:before,*:after { box-sizing:inherit;}
html { box-sizing: border-box;}
html, body { font-family: verdana;}
body { margin: 20px 30px;}
.judul-tengah { text-align: center;}
form { width: 80%; margin: 0 auto;}
.inputan { padding:8px; display:block; border:none; border-bottom:1px solid #ccc; width:100% }
form .border-bottom { border: 1px solid #ccc !important;}
.btn { text-align: center;}
.print-button { background-color: lightblue; border:none; display:inline-block; padding:8px 16px; overflow:hidden; text-decoration:none; text-align:center; cursor:pointer; border-radius: 6px; transition: 0.5s ease-in-out; color: #fff;}
.print-button:hover { background-color: #fff; color: black;}6. Selesai
Sekarang masuk ke web browser milik Sobat dan ketikkan localhost/print-webpage-with-jQuery (sesuai nama folder yang tadi Sobat buat)
Begitu temen-temen "Cara Mencetak Halaman Website Menjadi PDF Menggunakan Jquery Simpel dan Mudah" jika mengalami masalah boleh kiranya kita berdiskusi pada kolom komentar di bawah. Semoga bermanfaat, wassalam