Membuat Halaman Print Ukuran A4 Menggunakan HTML dan CSS

ROOT93 - Dalam contoh kasus tertentu kita mungkin membutuhkan sebuah antar muka yang menampilkan data – data dalam bentuk page/halaman yang bisa di print, seperti untuk print bukti pendaftaran, kartu peserta dan lain sebagainya. Cara termudahnya kita bisa menggunakan sebuah plugins seperti mpdf atau fpdf yang bisa menampilkan data dalam bentuk halaman file pdf.

Jika seandainya kita ingin membuat sebuah antar muka layaknya kertas A4 yang ditampilkan pada halaman web tanpa menggunakan bantuan plugins, kita bisa mencoba sedikit memainkan css untuk memanipulasi halaman web agar tampil layaknya sebuah kertas A4 yang siap dicetak.

Berikut ini adalah sebuah cara yang bisa digunakan untuk memenuhi kebutuhan tersebut diatas.

Membuat Halaman Print Ukuran A4 Menggunakan HTML dan CSS

Siapkan sebuah file css, Anda bisa menaruh cssnya di eksternal atau internal. Berikut adalah contoh kode susunan cssnya :

<style type="text/css">
/* Kode CSS Untuk PAGE ini dibuat oleh http://jsfiddle.net/2wk6Q/1/ */
    body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        background-color: #FAFAFA;
        font: 12pt "Tahoma";
    }
    * {
        box-sizing: border-box;
        -moz-box-sizing: border-box;
    }
    .page {
        width: 210mm;
        min-height: 297mm;
        padding: 20mm;
        margin: 10mm auto;
        border: 1px #D3D3D3 solid;
        border-radius: 5px;
        background: white;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    }
    .subpage {
        padding: 1cm;
        border: 5px red solid;
        height: 257mm;
        outline: 2cm #FFEAEA solid;
    }
    
    @page {
        size: A4;
        margin: 0;
    }
    @media print {
        html, body {
            width: 210mm;
            height: 297mm;        
        }
        .page {
            margin: 0;
            border: initial;
            border-radius: initial;
            width: initial;
            min-height: initial;
            box-shadow: initial;
            background: initial;
            page-break-after: always;
        }
    }
</style>

Terakhir tinggal panggil class yang ada menggunakan tag div seperti berikut ini

<div class="book">
    <div class="page">
        <div class="subpage">
          <p>Page 1/1</p>
          
                Masukan properti dkatanya disini
        </div>    
    </div>
 
    <div class="page">
        <div class="subpage">Page 2/2</div>    
    </div>

</div>

Jika berhasil nanti kurang lebih tampilannya seperti berikut ini
Anda hanya tinggal memasukan properti – properti data yang Anda butuhkan kedalam halaman tersebut pada contoh diatas

Contoh keseluruhan kode bisa Anda tulis seperti berikut ini

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Halaman Print A4</title>
</head>
<style type="text/css">
/* Kode CSS Untuk PAGE ini dibuat oleh http://jsfiddle.net/2wk6Q/1/ */
    body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        background-color: #FAFAFA;
        font: 12pt "Tahoma";
    }
    * {
        box-sizing: border-box;
        -moz-box-sizing: border-box;
    }
    .page {
        width: 210mm;
        min-height: 297mm;
        padding: 20mm;
        margin: 10mm auto;
        border: 1px #D3D3D3 solid;
        border-radius: 5px;
        background: white;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    }
    .subpage {
        padding: 1cm;
        border: 5px red solid;
        height: 257mm;
        outline: 2cm #FFEAEA solid;
    }
    
    @page {
        size: A4;
        margin: 0;
    }
    @media print {
        html, body {
            width: 210mm;
            height: 297mm;        
        }
        .page {
            margin: 0;
            border: initial;
            border-radius: initial;
            width: initial;
            min-height: initial;
            box-shadow: initial;
            background: initial;
            page-break-after: always;
        }
    }
</style>
<body>
<div class="book">
    <div class="page">
        <div class="subpage">
          <p>Page 1/1</p>
          
                Masukan properti datanya disini
        </div>    
    </div>
 
    <div class="page">
        <div class="subpage">Page 2/2</div>    
    </div>

</div>
</body>
</html>
<script type="text/javascript">window.print();</script>

Sampai disini kita telah berhasil Membuat Halaman Print Ukuran A4 Menggunakan HTML dan CSS.

(Ahmad Zaelani / r93)

Ahmad Zaelani

Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simple

5 Responses to "Membuat Halaman Print Ukuran A4 Menggunakan HTML dan CSS"

zunif.comMarch 27, 2019 at 10:05 PM

wah boleh juga nih gan dicoba tutorial nya biar bisa print ukuran a4 ya, jadi ukuran nya sudah pas nggak perlu di setting lagi ;)
Michael "Dije" DavidMarch 30, 2019 at 5:49 PM

Wah, bisa buat bahan belajar nih. Di sekolah juga lagi belajar HTML soalnya. Wkwkwkwkwkwkw
kotanopan.comApril 13, 2019 at 6:24 PM

ternyata bisa ya gan? makasih infonya bisa buat dipakai pada keadaan mendesak
Safanah0311December 17, 2019 at 11:29 AM

tutorial singkat,padat dan jelas
PejuangCodingMarch 23, 2020 at 9:26 PM

buat bikin footer sama header biar nempelnya tu gimana gan?

Komentar yang Anda kirim akan terlebih dahulu di moderasi oleh Admin