Maret 16

Print Halaman dengan JQuery

Cerita dimulai saat seminggu yang lalu teman saya ada kesulitan dengan tugasnya. Dia disuruh buat web agar saat tekan tombol langsung tampil Print. Dikarenakan saat itu saya sedang banyak sekali tugas menumpuk, jadi saya belum sempat bantu saat itu. Sebagai gantinya, saya akan memberikan cara & contoh pada tulisan saya kali mengenai tugas teman saya tersebut. Tapi, terlebih dahulu teman-teman perlu download jquery pada link berikut dikarenakan saya akan menggunakan jquery pada tulisan ini :

https://jquery.com/download/

Untuk print area pada html, saya menggunakan library printThis. Teman-teman dapat download terlebih dahulu pada link berikut :

https://github.com/jasonday/printThis

Setelah semua persiapan selesai, saatnya kita mulai untuk pembuatan htmlnya. Berikut langkah-langkahnya :

Buat sebuah halaman, misal saya namakan index.html. Masukkan kode html berikut :

<!DOCTYPE html>
<html>
<head>
<title>Print Jquery</title>
<script type="text/javascript" src="js/jquery-2.2.1.js"></script> <!-- Ini harus dideklarasikan untuk penggunaan fungsi Jquery -->
<script type="text/javascript" src="js/printThis.js"></script> <!-- Ini harus dideklarasikan untuk penggunaan fungsi printThis() -->
<script>
$(document).ready(function(){
$("#btnPrintArea").click(function(){
$('#printArea').printThis(); //Untuk Print Area tertentu bisa menggunakan code ini
});

$("#btnPrintAll").click(function(){
window.print(); //Untuk print semua area menggunakan perintah ini
});
});
</script>
</head>
<body>
<div id="printArea">
<table>
<tr>
<td>Nama :</td>
<td>Agunahwan Absin</td>
</tr>
<tr>
<td>Alamat :</td>
<td>Kebon Nanas Tangerang</td>
</tr>
<tr>
<td>Jenis Kelamin :</td>
<td>Laki-Laki</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><button id="btnPrintArea">Print Area</button>&nbsp;<button id="btnPrintAll">Print All</button></td>
</tr>
</table>
</div>
Ini tidak dicetak bila menggunakan printThis()
</body>
</html>

2. Buat sebuah folder, beri nama js. Folder ini yang akan kita gunakan sebagai tempat untuk menaruh Jquery dan printThis.js yang telah teman-teman download tadi.

Teman bisa langsung buka index.html tadi untuk melihat hasilnya. Akan tampil seperti berikut :

Apa yang terjadi saat tombol Print Area ditekan? Yang akan tercetak hanya area yang berada pada div dengan id printArea. Ini dikarenakan penggunaan fungsi printThis() yang kita gunakan dari library printThis.js. Teman-teman dapat mengkustomisasi area mana yang akan diprint dengan menggunakan id, class, dan macam-macam lainnya dalam area div, table, dan lainnya pula. Jadi tidak terbatas hanya id dan div saya.

Lalu apa yang terjadi saat tombol Print All ditekan? Yang akan tercetak adalah satu halaman penuh. Ini dikarenakan penggunaan perintah print() yang ada pada javascript. Perintah print() sebenarnya bukan merupakan perintah dari Jquery dikarenakan itu perintah javascript dasar. Lalu kenapa kita memerlukan jquery? Jquery di sini saya gunakan untuk mentrigger perintah click() pada tombol. Selain itu, printThis() yang teman-teman gunakan memerlukan Jquery sebagai library dasarnya.

Untuk kode lengkapnya, teman-teman dapat download pada link berikut :

https://drive.google.com/file/d/0B9_2JJSi4W6RYzZtUndIa3VySlU/view?usp=sharing

Mungkin sekian tulisan dari saya, mudah-mudahan bermanfaat buat teman-teman yang kesulitan dalam membuat perintah print. Terima kasih dan selamat beraktifitas. 😀

Terkait

Posted Maret 16, 2016 by agunahwan in category "Programming", "Tentang Komputer

5 COMMENTS :

By nippa88 on 23 Mei, 2017

tambahan om, kalo pun ada kasus waktu print alamat URL muncul

contoh :

Homepage (http://localhost)

ingin menjadi,

Homepage

mungkin solusinya bisa dipakai seperti ini

$(document).ready(function(){
$(“#btnPrintArea”).click(function(){
$(‘#printArea’).printThis({
importStyle: true // import style tags
}); //Untuk Print Area tertentu bisa menggunakan code ini
});

});

Memuat...

Reply ↓
1. By agunahwan (Post author) on 20 Januari, 2019
  
  Makasih byk buat tambahannya bro… 😀
  
  Memuat...
  
  Reply ↓
By mfikhsan on 3 Juli, 2018

Nice Artikel gan

Memuat...

Reply ↓
By Selena Joyner on 13 September, 2021

Hey, I visited your site and I think that your content is amazing! It is really engaging and original, you must have worked so hard to generate such a quality content. My name is Eylon from ForeMedia and I help website owners with great websites to maximize the revenue they make from their website. I would love to buy Ad Spaces on your website and pay you per each impression of the ads on your site. We are Google Ad Exchange Premium partners and we work with more than 100 Ad Network & thousands of premium direct advertisers who would LOVE to buy Ads directly from your site and we can guarantee to increase your revenue by at least 45% compared to other advertising solutions you are currently using. You deserve to earn more for your content and maximize your earning potential and I will help you unlock that potential! There is no cost, you can register to our monetization platform for free on this link: https://foremedia.net/start I will be available for you on the Live Chat if you need any help, or you can email me back to: jannine.s@foremedia.net if you have any questions. I have at least 17 Premium Advertisers that have asked me to approach you because they would like to advertise on your website on Premium eCPM [cost per impressions] basis. Have a good day & feel free to ping me for any question! Click the link here for 1 minute registration to our platform [it’s free!]: https://foremedia.net/start

Memuat...

Reply ↓
1. By Agunahwan Absin on 2 Februari, 2022
  
  Hi Eylon,
  
  I’m so sorry I just read your comment. I just sent email to you about this. Thank you so much.
  
  Thank you
  
  Memuat...
  
  Reply ↓

S	S	R	K	J	S	M
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30

Print Halaman dengan JQuery

Bagikan ini:

Terkait

Tinggalkan BalasanBatalkan balasan