Scribd
Unggah
83 tayangan3 halaman

Cetak PDF dengan CSS

Dokumen ini menjelaskan cara mencetak halaman web ke PDF menggunakan CSS dengan memanfaatkan media query @media print untuk menyesuaikan tampilan cetak. Selain itu, terdapat langkah-langkah untuk menambahkan tombol cetak menggunakan JavaScript dan mengatur ukuran kertas dengan properti @page. Untuk otomatisasi, disarankan menggunakan Puppeteer atau wkhtmltopdf.

Diunggah oleh

habib
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
83 tayangan3 halaman

Cetak PDF dengan CSS

Dokumen ini menjelaskan cara mencetak halaman web ke PDF menggunakan CSS dengan memanfaatkan media query @media print untuk menyesuaikan tampilan cetak. Selain itu, terdapat langkah-langkah untuk menambahkan tombol cetak menggunakan JavaScript dan mengatur ukuran kertas dengan properti @page. Untuk otomatisasi, disarankan menggunakan Puppeteer atau wkhtmltopdf.

Diunggah oleh

habib
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd

Cetak PDF dengan CSS

mencetak pdf dari browser menggunakan css

Untuk mencetak halaman web ke PDF menggunakan CSS, Anda bisa menggunakan fitur
media query @media print untuk mengatur tampilan cetak dan memastikan hasil cetakan
terlihat rapi. Berikut beberapa langkah yang bisa Anda ikuti:

1. Gunakan Media Query @media print


Media query @media print memungkinkan Anda menyesuaikan tampilan halaman hanya
saat dicetak.

css

@media print {
body {
font-size: 12pt;
color: black;
}

/* Sembunyikan elemen yang tidak perlu */


.no-print {
display: none !important;
}

/* Atur tata letak agar lebih ramah cetak */


.page-break {
page-break-before: always;
}
}

2. Gunakan Properti page-break


CSS memiliki properti page-break untuk mengontrol pemisahan halaman saat dicetak.

1/3
css

.page-break {
page-break-before: always; /* Memastikan elemen ini muncul di halaman baru */
}

3. Tambahkan Tombol Cetak dengan JavaScript


Untuk memudahkan pengguna mencetak, Anda bisa menambahkan tombol cetak dengan
JavaScript.

html

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

4. Gunakan Browser Print to PDF


Setelah mengatur CSS, cetak halaman dengan cara:

Google Chrome / Edge: Ctrl + P → Pilih "Save as PDF"

Mozilla Firefox: Ctrl + P → Pilih "Microsoft Print to PDF" atau printer PDF lainnya

5. Gunakan size untuk Mengatur Ukuran Kertas


Anda bisa mengontrol ukuran kertas dengan CSS:

css

@page {
size: A4;
margin: 2cm;
}

2/3
Jika Anda ingin mencetak dari aplikasi web secara otomatis ke PDF tanpa intervensi
pengguna, Anda bisa menggunakan Puppeteer (Node.js) atau wkhtmltopdf.

Ingin contoh implementasi lebih lanjut? 🚀

3/3

Anda mungkin juga menyukai