Membuat Print Out Halaman Web dengan Javascript


bagi anda yang gemar membuat aplikasi berbasis web dan kesusahan membuat report karena harus pakek FPDF, MPDF dll. berikut saya kasih trik membuat report yang tidak ribet alias langsung mengambil dari layout aplikasi berbasis web kita.

screenshoutnya:

tab1

setelah di klik cetak laporan total tabungan, maka akan menghasilkan print priview di bawah ini (menggunakan Google Chrome)

 

tab2

 

dari gambar diatas dapat dijelaskan bahwa printout dilakukan pada area tertentu saja yang dikehendaki.

berikut langkah-langkah pembuatannya.

1. buat file terserah semisal index.php

isikan:

<textarea id=”printing-css” style=”display:none;”>.no-print{display:none}</textarea>

<script type=”text/javascript”>
//<![CDATA[
function printDiv(elementId) {
var a = document.getElementById(‘printing-css’).value;
var b = document.getElementById(elementId).innerHTML;
window.frames[“print_frame”].document.title = document.title;
window.frames[“print_frame”].document.body.innerHTML = ‘<style>’ + a + ‘</style>’ + b;
window.frames[“print_frame”].window.focus();
window.frames[“print_frame”].window.print();
}
//]]>
</script>
<a href=”javascript:printDiv(‘print-out’);”>cetak</a>
<div id=”print-out”>Pembuatan Report sederhana</div>

2. jalankan file dan klik link cetak maka akan tercetak seperti gambar dengan output Pembuatan report sederhana

terimakasih kalau ada yang ditanyakan silahkan isikan dikomentar

2 Comments Add yours

  1. anti mirasantika mengatakan:

    thanks, . . ni aku lagi mendalami ilmu pemograman, . .
    semoga pemilik blog ini di mudahkan rezekinya dan diberikan kebahagiaan yang melimpah, ..

    1. XIDOC mengatakan:

      Aminnnnn. Semoga sukses dengan ilmunya.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s