Pada artikel kali ini kita akan membahas Cara mengilangkan tombol saat print di javascript atau window.print(). Pada dasarnya membuat laporan menggunakan window.print() paling mudah dan solusi membuat laporan dengan cepat serta bisa langsung diprint juga, tidak seperti membuat pdf, excel dan lain-lain. Tapi pada saat tertentu terkadang kita dihadapkan dengan permasalah yang baru ketika user meminta hal yang aneh-aneh seperti ingin laporan sama dengan aplikasi desktop atau lebih sering kita ketahui seperti crystal report di vb dan jasper report di java netbeans ada fitur next back atau paginasi.
Sebenarnya kita juga bisa tambahkan tombol next back atau paginasi di laporan, terus kita bagi-bagi kedalam halaman seperti halnya kita membuat paginasi di tampilan web. Yang jadi masalah adalah ketika membuat tombol next back atau paginasi saat di klik tombol maka si tombolnya jugapun ikut ke print, damn!
Dengan adanya permintaan seperti itu maka kita di hadapkan dengan masalah baru bagaimana laporan kita bisa sama dengan laporan-laporan desktop tersebut. Hal tersebutlah yg membuat kita terpaksa berselancar di internet mencari solusinya.
Ketika mencari tutorial ternyata ada beberapa script javascript yang membatu memecahkan solusi agar mengilangkan tombol saat print di javascript. lihat video di bawah, contoh yang saya buat.
Karna script di video sangat banyak dan memakai database juga. untuk contoh script bisa lihat di bawah ini.
<html>
<head>
<title>::Laporan</title>
<style type="text/css">
</style>
</head>
<body onload='window.print();'>
<h1>Contoh Laporan</h1>
<div id='tombol'>
<button onclick='window.print();'>Print</button>
</div>
<script type='text/javascript'>
var beforePrint = function() {
document.getElementById("tombol").style.display = "none";
};
var afterPrint = function() {
document.getElementById("tombol").style.display = "inline";
};
if (window.matchMedia) {
var mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener(function(mql) {
if (mql.matches) {
beforePrint();
} else {
afterPrint();
}
});
}
window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;
</script>
Sekian untuk tutorial kali ini tentang Cara mengilangkan tombol saat print di javascript atau window.print().