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
  1. 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>
  2. 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>
  3. Jika berhasil nanti kurang lebih tampilannya seperti berikut ini
    Membuat Halaman Print Ukuran A4 Menggunakan HTML dan CSS
  4. Anda hanya tinggal memasukan properti – properti data yang Anda butuhkan kedalam halaman tersebut pada contoh diatas
  5. 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)
 

Related Posts :

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

  1. wah boleh juga nih gan dicoba tutorial nya biar bisa print ukuran a4 ya, jadi ukuran nya sudah pas nggak perlu di setting lagi ;)

    ReplyDelete
  2. Wah, bisa buat bahan belajar nih. Di sekolah juga lagi belajar HTML soalnya. Wkwkwkwkwkwkw

    ReplyDelete
  3. ternyata bisa ya gan? makasih infonya bisa buat dipakai pada keadaan mendesak

    ReplyDelete

Silahkan untuk meninggalkan komentar, santai saja dan mulailah berkomentar...