Membuat perintah print dan print preview dengan javascript

Tutorial berikut ini adalah bagai mana cara membuat print pada tabel, pada contoh gambar diatas, saya mencoba untuk mem-print data pada tabel,

untuk code sederhananya yang bisa kita lihat di w3schools 

<button onclick="myFunction()">Print this page</button>

<script>

function myFunction() {

    window.print();

}

</script>

namun pada tutorial saya ini sedikit berbeda, pada contoh print diatas hanya print data tanpa style atau tanpa menyertakan file css yang kita include kedalam halaman web, untuk solusi menyertakan style pada saat melakukan print sebagai berikut



<script type="text/javascript">

/*--This JavaScript method for Print command--*/

function PrintDoc() {

var toPrint = document.getElementById('tabel');
var popupWin = window.open('');

popupWin.document.open();

popupWin.document.write('<html><title>::Print Data::</title><link rel="stylesheet" type="text/css" href="print.css" /></head><body onload="window.print()">')
popupWin.document.write(toPrint.outerHTML);
popupWin.document.write('</html>');
popupWin.document.close();

}

/*--This JavaScript method for Print Preview command--*/

function PrintPreview() {

var toPrint = document.getElementById('tabel');

var popupWin = window.open('');

popupWin.document.open();

popupWin.document.write('<html><title>::Printpreview Data::</title><link rel="stylesheet" type="text/css" href="print.css" media="screen"/></head><body">')

popupWin.document.write(toPrint.outerHTML);

popupWin.document.write('</html>');

popupWin.document.close();
}

</script>

pada script diatas terdapat 2 function yang pertama PrintDoc dan yang kedua PrintPreview dimana kedua function memiliki tugas yang berbeda:

var toPrint = document.getElementById('tabel');

Penting pada script diatas ini jika ingin print hanya tabel, kita harus membuat ID untuk tabel tersebut, dan jika itu tag <div> maka pada tag tambahkan idnya seperti contoh IDnya adalah tabel maka pada tag <div>
tambahkan <div id="tabel">


untuk mengaktifkan window print pada browser kita menggunakan function PrintDoc  sementara untuk preview data kita gunakan function PrintPreview contohnya seperti gambar dibawah ini

Contoh Window Print Browser

gambar diatas tabel masih tidak memiliki warna atau style yang kita buat pada file css kita, untuk mengaktifkannya, pada menu option sebelah kiri centang background graphics maka hasilnya akan menjadi sepeti ini

Gambar Tabel dengan style css



Gambar Print Priview
Setelah melihat gambar diatas kita mulai penerapannya

UPDATE:
buat file sebuah file css beri nama dengan print.css isi dengan code css berikut ini
hr{
margin: 20px 0;
}
table {
    border-collapse: collapse;
    width: 100%;
}
th, td {
    border:1px solid #fff;
    text-align: left;
    padding: 8px;
}
tr:nth-child(even){background-color: #f2f2f2}
.delete{
background-color:#e74c3c;
color:#fff;
text-align: center;
}
tr:hover{
background-color:#34495e;
color:#fff;
}
.edit{
background-color:#3498db;
color:#fff;
text-align: center;
}
th {
    background-color:#2c3e50;
    color: white;
}
tinggal disesuaikan dengan code javascript dibawah ini letak file cssnya

copy code script javascript diatas, kemudan letakkan diatas tag </body>
seperti gambar dibawah ini
dan untuk memangill functionya pada button tinggal buat seperti ini :

<button  onclick="PrintDoc()"><img src="img/print.png">Print Data</button>
<button  onclick="PrintPreview()"><img src="img/preview.png">Print Preview</button>

sekian tutorial singkat saya, mudah-mudahan menambah ilmu dan wawasan kita, jika berkenan dan suka dengan artikel saya, silahkan subcrib blog saya untuk mendapatkan tutorial terbaru









keyword:
membuat print di PHP, membuat print preview dengan PHP, membuat tombol print di PHP, membuat perintah print pada PHP,membuat print dan print preview dengan PHP, membaut perintah print dengan PHP