Jin Toples Programming

Cara Print Page Web Dengan Javascript - Ketika kita membuat aplikasi website kita ingin mencetak sebuah web page atau halaman web untuk dokumentasi atau sebagai report hasil dari suatu aplikasi web. Hal ini sebenarnya dapat dengan mudah anda lakukan dengan menekan tombol di keyboard CTRL + P. Akan tetapi jika anda menggunakan cara ini semua halaman yang ada dalam website akan tercetak, padahal dalam beberapa kasus kita hanya ingin beberapa bagian atau elemen saja yang tercetak. seperti data tabel karyawan, sllip gaji karyawan, kwitansi pembayaran, report keuangan, dll.

Bagaimanakah caranya kita dapat mencetak bagian yang kita inginkan saja ? jawabannya sangatlah sederhana yaitu anda cukup menyembunyikan bagian yang tidak anda inginkan ketika mencetaknya. tapi bagaimanakah kita melakukanna sedangkan jika kita langsung menekan CTRL + P di keyboard akan langsung muncul popup preview dari printnya, dan sudah tidak dapat di ubah lagi isinya.

Untuk mencetak halaman sebenarnya terdapat beberapa cara selain langsung menggunakan control print. salah satunya yaitu dengan menggunakan fitur Javascript window.print();. kemudian bagaimana kita meyembunyikan bagian yang tidak yang di ingikan ketika di cetak ?

Dengan menggunakan salah satu fitur yang sudah disediakan oleh CSS @media print kita dapat memisahkan tampilan web page asli dengan web page yang akan di cetak. Jika kita memasukan tag CSS di dalam @media print ini CSS akan aktif jika halaman web menjadi popup print. masih bingung ? lebih jelasnya langsung saja kita ke prakteknya.

Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse. Karena program ini cukup sederhana saya sarankan menggunakan Notepad atau Notepad++ saja sudah cukup.

CSS

Pertama buatlah sebuah folder dengan nama Print Page Web, sekarang untuk mempercantik bentuk tampilan tabel yang akan di print buka notepad++ kemudian buatlah sebuah file baru dan ketikan script berikut :

h2 ,h3{
  margin: 0px;
}

.container {
  text-align: center;
  overflow: hidden;
  width: 800px;
  margin: 0 auto;
  font-family:monospace;
}

.container table {
  width: 100%;
}

.container td, .container th {
  padding: 10px;
}

.container td:first-child, .container th:first-child {
  padding-left: 20px;
}

.container td:last-child, .container th:last-child {
  padding-right: 20px;
}

.container th {
  border-bottom: 1px solid #ddd;
  position: relative;
  cursor: pointer;
}

.container th.desc:after {
  border-top-color: #666;
}

.container th.asc:before {
  border-bottom-color: #666;
}

.container th:after, .container th:before {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px;
  width: 0;
  height: 0;
}

.container th:after {
  border-top-color: #ddd;
  top: 22px;
}

.container th:before {
  border-bottom-color: #ddd;
  top: 10px;
}

Simpan dalam folder Print Page Web dengan nama style.css

HTML

Sekarang untuk markupnya buatlah sebuah file baru lagi dengan notepad++ kemudian ketikan script berikut :

<!DOCTYPE html>
<html>
 <head>
<title>Tabel Sorting CSS dan Javascript</title>
<link href="style.css" rel="stylesheet">
 <style type="text/css">
    @media print
    {
     #not-print { display: none; }
    }
    </style>
 </head>
 <body>
<section class="container">
 <div id="not-print">
  <h2>Jin Toples Programming</h2>
  <h3>jintoples.blogspot.com</h3>
 </div>
 <h2>Print Page Web Dengan Javascript</h2>
 <table>
  <thead>
   <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Phone</th>
    <th>Price</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>Jin Toples</td>
    <td>jin.doe@gmail.com</td>
    <td>0123456789</td>
    <td>99</td>
   </tr>
   <tr>
    <td>Jane Toples</td>
    <td>jane@toples.org</td>
    <td>9876543210</td>
    <td>349</td>
   </tr>
   <tr>
    <td>Rengo Kolas</td>
    <td>begi@batman.com</td>
    <td>6754328901</td>
    <td>199</td>
   </tr>
  </tbody>
 </table>
 <a href="#" id="not-print" onClick="window.print();return false" >- Print -</a>

</section>

 </body>
</html>

Simpan dengan nama index.html di dalam folder yang sama.

Sekarang Print Page anda sudah selesai anda dapat mencobanya dengan cara klik 2x pada file tersebut, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE Bkakakak.... jika di IE tidak jalan saya sudah tidak heran.

Jika anda perhatikan ada beberapa bagian yang tidak muncul di jendela print, yaitu header judul Jin Toples Programming dan tombol printnya. Hal ini di karenakan kita menset displaynya mejadi none ketia memasuki halaman print. perhatikan pada bagian script ini :

<style type="text/css">
    @media print
    {
     #not-print { display: none; }
    }
    </style>

Jika ada bagian yang di tampilkan anda dapat melakukan hal yang sama, cukup tambahkan tag CSS baru atau menambahkan id="not-print" pada bagian yang tidak ingin dimunculkan.

Anda juga dapat mengunduh file jadinya di sini : DOWNLOAD