Mecha versi 2.6.3 sudah dirilis!

Print/Mencetak Sebagian Halaman Saja dengan JavaScript

Gambar untuk dialog pencetakan pada Google Chrome
Mencetak sebagian halaman dengan JavaScript

Berbeda dengan 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>

Lihat Demo

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

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>
<div id="area-2">Tapi tidak untuk teks ini.</div>
itu lagi

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:

<a href="javascript:printDiv('area-1');">

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 :)

irwans

di internet Eksplorer gk jalan ya Gan ? solusinya Gan

lenny

Alhamdulilah bisa. makasih kak

Komentar telah ditutup.