Print/Mencetak Sebagian Halaman Saja dengan JavaScript
Berbeda dengan JavaScript dasar window.print()
yang akan mencetak keseluruhan halaman, fungsi ini akan mencetak halaman pada bagian-bagian tertentu saja. Cara kerjanya adalah fungsi ini akan mencetak duplikat konten area di dalam iframe pencetakan.
Dua buah elemen, yaitu <textarea>
dan <iframe>
dibuat untuk keperluan ini. Area teks digunakan untuk menyimpan kode CSS pencetakan, sedangkan iframe digunakan untuk menampung salinan bagian halaman yang ingin dicetak. Saat salinan bagian halaman tersebut sudah masuk ke dalam iframe yang kita sembunyikan wujudnya, hal yang perlu kita lakukan selanjutnya adalah mencetak konten iframe tersebut, bukan halaman yang sedang aktif:
<textarea id="printing-css" style="display:none;">.no-print{display:none}</textarea>
<iframe id="printing-frame" name="print_frame" src="about:blank" style="display:none;"></iframe>
<script>
//<![CDATA[
function printDiv(elementId) {
var a = document.getElementById('printing-css').value;
var b = document.getElementById(elementId).innerHTML;
window.frames["print_frame"].document.title = document.title;
window.frames["print_frame"].document.body.innerHTML = '<style>' + a + '</style>' + b;
window.frames["print_frame"].window.focus();
window.frames["print_frame"].window.print();
}
//]]>
</script>
Aktivasi bisa dilakukan dengan cara memicu fungsi printDiv(elementId)
pada tautan atau tombol, dimana elementId
adalah ID dari area khusus yang ingin dicetak:
<a class="no-print" href="javascript:printDiv('area-1');">Print</a>
...
<div id="area-1">Teks ini akan tercetak di kertas...</div>
<div id="area-2">Tapi tidak untuk teks ini.</div>
Kode CSS pencetakan yang digunakan Saya sarankan adalah kode CSS yang pernah Saya tuliskan di sini, untuk memastikan agar tampilan halaman yang dicetak tertata dengan rapi. Atau kosongkan saja textarea tersebut dan biarkan User Agent Stylesheet pada masing-masing peramban menangani tampilan elemen yang ada.
Alternatif lain, Anda juga bisa menggunakan CSS eksternal jika Anda merasa bahwa textarea tanpa makna di atas hanya akan mengganggu kebersihan kode sumber web Anda:
<iframe id="printing-frame" name="print_frame" src="about:blank" style="display:none;"></iframe>
<script>
//<![CDATA[
function printDiv(elementId) {
var a = "/path/to/printing-css.css";
var b = document.getElementById(elementId).innerHTML;
window.frames["print_frame"].document.title = document.title;
window.frames["print_frame"].document.body.innerHTML = '<link rel="stylesheet" href="' + a + '">' + b;
window.frames["print_frame"].window.focus();
window.frames["print_frame"].window.print();
}
//]]>
</script>
Hasilnya akan terlihat jelas pada peramban Google Chrome yang notabene memiliki komunikasi pencetakan halaman yang berbeda dengan peramban lainnya.
11 Komentar
Ilham Ibnu Purnomo
Wah, tutorialnya keren nih om.. makasih ya
Randy
bang beda antara yg pertama n yg kedua itu apa? btw yg kedua gak mesti make
<div id="area-1">Teks ini akan tercetak di kertas...</div>
itu lagi<div id="area-2">Tapi tidak untuk teks ini.</div>
Taufik Nurrohman
Itu cuma contoh. Karena Saya mengeksekusi fungsi ke elemen dengan ID
area-1
, sesuai judulnya, hanya mencetak sebagian area saja yang memiliki ID tertentu, maka cuma area pertama saja yang akan tercetak. Sesuai dengan ini:Belum dong ya?
Unknown
jadi tiap postingan harus manual ya gan??
:(
androv
Mantab gan... Thanks berat!! :D
sangat membantu :-bd
Eddy Chandra
permisi gan
cara menghungkan semua filenya gimana ?
tolong share project lengkapnya gan :)
Radinul
Terima Kasih Banyak Gan ., Sangat Membantu gan ., !!!
Syakir Rahman
Akhirnya ketemu juga caranya.. Terima kasih banyak Pak :)
Musik express
work om.. terima kasih ya
irwans
di internet Eksplorer gk jalan ya Gan ? solusinya Gan
lenny
Alhamdulilah bisa. makasih kak