Berbeda dengan JavaScript dasar window.print() yang akan mencetak keseluruhan halaman, fungsi ini akan mencetak halaman pada bagian-bagian tertentu saja. Cara kerjanya yakni fungsi ini akan mencetak duplikat konten area di dalam iframe pencetakan.
Dua buah elemen, yaitu <textarea> dan <iframe> dibentuk untuk keperluan ini. Area teks dipakai untuk menyimpan instruksi CSS pencetakan, sedangkan iframe dipakai untuk menampung salinan bab halaman yang ingin dicetak. Saat salinan bab halaman tersebut sudah masuk ke dalam iframe yang kita sembunyikan wujudnya, hal yang perlu kita lakukan selanjutnya yakni 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 dapat dilakukan dengan cara memicu fungsi printDiv(elementId) pada tautan atau tombol, dimana elementId yakni 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 dipakai Saya sarankan yakni instruksi CSS yang pernah Saya tuliskan di sini, untuk memastikan biar 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 dapat memakai CSS eksternal kalau Anda merasa bahwa textarea tanpa makna di atas hanya akan mengganggu kebersihan instruksi 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 terperinci pada peramban Google Chrome yang notabene mempunyai komunikasi pencetakan halaman yang berbeda dengan peramban lainnya.
Sumber https://www.dte.web.id/