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 Tabel dengan style css
Gambar Print Priview
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 cssnyacopy code script javascript diatas, kemudan letakkan diatas tag </body>
seperti gambar dibawah 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
