<input type='button' id='btn' value='Print' onclick='printDiv();'> <div id="mycard" > <!-- content that wan t to print --> <style> * { -webkit-print-color-adjust: exact !important; /* Chrome, Safari, Edge */ color-adjust: exact !important; /*Firefox*/ } </style> </div> function printDiv() { var divToPrint=document.getElementById('mycard'); var newWin=window.open('','Print-Window'); newWin.document.open(); newWin.document.write('<html><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>'); newWin.document.close(); newWin.document.focus(); // necessary for IE >= 10*/ newWin.document.print(); setTimeout(function(){newWin.close();},20); }
new code
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="printableArea"> <h1>Print me</h1> </div> <input type="button" value="print a div!" /> <div id="kawasanprint"> fdfdfdfd gfgfgfgfgf gfgfgfgfgf gfgfgfgfgf </div> </body> </html> <script> document.querySelectorAll('[type="button"]')[0].addEventListener("click", function() { printDiv('kawasanprint') }); function printDiv(divName) { var printContents = document.getElementById(divName).innerHTML; var originalContents = document.body.innerHTML; document.body.innerHTML = printContents; window.print(); document.body.innerHTML = originalContents; } </script>