Print & PDF Export
Konvensi Tailwind print: yang dipakai untuk mencetak invoice dan sertifikat langsung dari browser lewat window.print(), tanpa library PDF terpisah.
Cetak langsung dari halaman, bukan generate PDF terpisah
Alur invoice memanggil window.print() pada halaman yang sama, lalu memakai varian print: Tailwind untuk menyembunyikan chrome (header, footer, breadcrumb, tombol aksi) dan merapikan kartu yang dicetak supaya sesuai proporsi kertas. Tidak ada dependensi library PDF — yang dilihat pengguna di preview cetak browser adalah versi halaman yang sudah disesuaikan lewat CSS saja.
Kelas print: yang dipakai
| Kelas | Diterapkan pada | Efek saat mencetak |
|---|---|---|
print:hidden | Header, footer, breadcrumb, tombol aksi | Disembunyikan total dari hasil cetak — chrome navigasi tidak relevan di atas kertas. |
print:block | Grid konten utama | Memaksa tata letak grid/flex kembali ke alur block normal supaya tidak terpotong antar kolom. |
print:py-0 | Grid konten utama | Menghapus padding vertikal layar yang tidak dibutuhkan di kertas. |
print:rounded-none print:border-0 print:shadow-none | Kartu/artikel yang dicetak | Menghilangkan radius, border, dan shadow dekoratif layar — kertas tidak punya latar untuk shadow terlihat. |
<!-- layouts/account.vue -->
<header class="print:hidden">...</header>
<main class="print:block print:py-0">
<!-- invoice.vue -->
<article class="rounded-xl border shadow-xs print:rounded-none print:border-0 print:shadow-none">
...
</article>
</main>
<footer class="print:hidden">...</footer>Tombol pemicu
Tombol ini sendiri diberi print:hidden supaya tidak ikut tercetak.
window.print() pada klik.Satu pertanyaan terbuka yang belum diputuskan: apakah konvensi ini cukup untuk kebutuhan cetak massal (mis. mencetak banyak sertifikat sekaligus), atau pada titik tertentu perlu pipeline PDF sungguhan di server. Halaman ini didokumentasikan sebagai Needs Review sampai pertanyaan itu dijawab.