Cara Print dan Simpan Halaman Web HTML ke PDF yang Hanya Tampil 1 Halaman Saja di Browser

Halo gais, Kembali lagi bersama Miniblog di Inzaghi's Blog! Tidak semua Halaman Web HTML di Browser bisa menampilkan semua Halaman jika ingin menyimpan (Save) atau menyetak (Print) Halaman utuh. Namun, tidak semuanya bisa seperti itu dapat menampilkan Halaman Penuh. Kali ini kita akan memberikan Tutorial Singkat Cara Print dan Simpan Halaman Web HTML ke PDF yang Hanya Tampil 1 Halaman Saja di Browser.

Sumber : ChatGPT dan Google Gemini

Pada Screenshot di bawah ini, terlihat bahwa Chrome/Edge/Brave hanya mendeteksi "1 sheet of paper", padahal halaman tutorial DICoding yang Anda buka sebenarnya panjang dan seharusnya bisa menjadi beberapa halaman PDF.

Masalah ini biasanya bukan karena browser Chromium-nya, melainkan karena salah satu dari berikut :

1. Website menggunakan Layout Modern (SPA) dengan Container Scroll

Banyak website modern (React, Vue, Next.js, dll.) tidak membuat halaman memanjang secara normal.

Sebaliknya :

• Halaman utama memiliki tinggi tetap (height: 100vh)
• Isi materi berada di dalam <div> yang bisa di-scroll
• Browser hanya mencetak area yang terlihat

Akibatnya :

Browser melihat:

1 halaman

Padahal user melihat:

50 halaman hasil scroll

Ini sering terjadi di :

• Dicoding
• Udemy
• Coursera
• Notion
• Dashboard SaaS
• Dokumentasi interaktif

2. Sifat Konten yang "Scrollable" (Overflow)

Halaman materi atau kelas online modern umumnya menggunakan tata letak di mana sidebar (menu kiri/kanan) dan konten utama dipisahkan. Konten utama tersebut dibatasi tingginya (misalnya menggunakan height: 100vh atau tinggi penuh layar) dan diberikan properti CSS overflow-y: auto atau overflow: scroll.

3. Batasan Engine Chromium

Saat Anda menekan Ctrl + P, browser Chromium hanya akan mendeteksi tinggi dari container utama yang terlihat di layar saat itu. Karena container tersebut dikunci tingginya oleh kode website agar bisa di-scroll secara internal, browser menganggap halaman tersebut memang hanya seukuran satu layar itu saja, sehingga konten di bawahnya terpotong dan hanya menghasilkan "1 sheet of paper".

Berikut ini adalah Langkah-langkahnya.

Pertama, bukalah Website yang ingin kalian tuju, misalnya Situs Web yang sudah saya sebutkan di atas. Lalu, klik Kanan untuk melakukan "Inspect".

Setelah itu, carilah Elemen HTML teratas dan carilah beberapa Elemen CSS berikut ini :

overflow-y: auto;
overflow-x: hidden;

Kemudian, gantilah agar menjadi seperti ini :

overflow-y: visible !important;
overflow-x: visible !important;

Kemudian, Tekan lagi "Ctrl + P" dan sekarang kalian sudah bisa mengunduh (Download) Halaman HTML tadi. Tekan Tombol "Simpan/Save" untuk men-Download ke PDF.

Terakhir, Simpanlah ke File Explorer dan klik "Save".

Inilah Video kami di TikTok Inzaghi's Media :

[COMING SOON]

Mohon maaf apabila ada kesalahan sedikit pun pada Tutorial ini.

Terima Kasih 😀😊😘👌👍 :)