Sign in Subscribe
Javascript

Mencetak Halaman Web Langsung dari Browser dengan Print Window

Mencetak Halaman Web Langsung dari Browser dengan Print Window
Photo by Christopher Gower / Unsplash

Dalam beberapa situasi, kita mungkin ingin mencetak halaman web langsung dari browser tanpa harus membuka menu cetak secara manual. JavaScript menyediakan cara mudah untuk melakukannya menggunakan window.print(). Dengan metode ini, kita bisa membuat tombol cetak yang memungkinkan pengguna mencetak halaman hanya dengan satu klik.

Menggunakan window.print() sangat berguna untuk mencetak invoice, laporan, tiket, atau dokumen lainnya langsung dari browser, tanpa perlu pengaturan tambahan.

Artikel ini akan membahas cara menggunakan window.print(), contoh penerapannya, serta beberapa trik untuk meningkatkan tampilan cetak halaman web.

Cara Menggunakan window.print()

Metode window.print() bisa dipanggil langsung dari JavaScript untuk membuka dialog cetak browser.

window.print();

Kode di atas akan memunculkan jendela dialog cetak, di mana pengguna bisa memilih printer atau menyimpan halaman dalam format PDF.

Contoh Implementasi di HTML

Untuk membuat tombol cetak di halaman web, gunakan kode berikut:

<button onclick="window.print()">Cetak Halaman</button>

Ketika tombol diklik, browser akan menampilkan preview cetak dan memberikan opsi untuk mencetak atau menyimpan halaman sebagai PDF.

Menyesuaikan Tampilan Cetak dengan CSS

Agar hasil cetakan lebih rapi dan profesional, kita bisa menggunakan CSS khusus untuk mode cetak dengan media query @media print.

1. Menghilangkan Elemen yang Tidak Perlu Saat Dicetak

Kadang kita tidak ingin mencetak bagian seperti header, footer, sidebar, atau tombol navigasi. Kita bisa menyembunyikannya menggunakan CSS berikut:

@media print {
    .no-print {
        display: none;
    }
}

Lalu tambahkan kelas no-print pada elemen yang ingin disembunyikan:

<header class="no-print">Header Situs</header>
<button class="no-print" onclick="window.print()">Cetak Halaman</button>

Ketika halaman dicetak, elemen dengan kelas no-print tidak akan muncul dalam hasil cetakan.

2. Mengatur Ukuran dan Format Cetak

Kita juga bisa mengatur ukuran halaman dan font agar lebih sesuai untuk dicetak.

@media print {
    body {
        font-size: 12pt;
    }
    h1 {
        font-size: 16pt;
    }
}

Kode ini memastikan teks tetap mudah dibaca dalam hasil cetakan.

Menggunakan window.print() dengan Event Listener

Jika kita ingin memanggil fitur cetak setelah suatu aksi (misalnya, setelah mengisi formulir), kita bisa menggunakan event listener:

document.getElementById("cetak").addEventListener("click", function() {
    window.print();
});

Tombol cetak di HTML:

<button id="cetak">Cetak Sekarang</button>

Saat tombol ditekan, browser akan langsung membuka dialog cetak.

Secara default, browser menambahkan header dan footer saat mencetak halaman web. Kita bisa menggantinya dengan elemen yang lebih profesional menggunakan CSS:

@media print {
    @page {
        margin: 1in;
    }
    .custom-header {
        display: block;
        text-align: center;
        font-weight: bold;
    }
    .custom-footer {
        display: block;
        text-align: center;
        position: fixed;
        bottom: 0;
        width: 100%;
    }
}

Kemudian, tambahkan elemen di HTML:

<div class="custom-header">Laporan Keuangan 2024</div>
<div class="custom-footer">Halaman ini dicetak dari example.com</div>

Elemen ini hanya akan muncul di hasil cetakan, bukan di tampilan layar.

Kapan Harus Menggunakan window.print()?

✅ Jika ingin mempermudah pengguna mencetak laporan atau invoice.
✅ Jika ingin memberikan pengalaman pencetakan yang lebih cepat dan praktis.
✅ Jika ingin menyesuaikan tampilan cetak menggunakan CSS.
❌ Jangan gunakan jika halaman mengandung interaksi dinamis, karena cetakan hanya menangkap tampilan statis.

Kesimpulan

  • window.print() memungkinkan pengguna mencetak halaman web dengan mudah hanya dengan satu klik.
  • Bisa dikombinasikan dengan CSS @media print untuk menyembunyikan elemen yang tidak perlu saat dicetak.
  • Berguna untuk mencetak invoice, laporan, atau dokumen resmi lainnya dari browser tanpa memerlukan plugin tambahan.
  • Pastikan tampilan cetak optimal dengan mengatur margin, font, dan elemen yang ingin disertakan dalam hasil cetakan.

Dengan memahami cara kerja Print Window, kita bisa memberikan fitur cetak yang lebih praktis dan profesional bagi pengguna website!

Read next