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

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

  • Musik express

    work om.. terima kasih ya

  • irwans

    di internet Eksplorer gk jalan ya Gan ? solusinya Gan

  • lenny

    Alhamdulilah bisa. makasih kak

Komentar telah ditutup.