Moorcam Posted January 18, 2023 Share Posted January 18, 2023 Hi folks, I am using the following JS to print the contents of a Div. However, when I click on Print, the print preview window opens but the document has no styling. function printDiv() { var divToPrint=document.getElementById('invoice'); var newWin=window.open('','Print-Window'); var printButton = document.getElementById("printButton1"); var closeButton = document.getElementById("closeButton1"); newWin.document.open(); printButton.style.visibility = 'hidden'; closeButton.style.visibility = 'hidden'; newWin.document.write('<html><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>'); printButton.style.visibility = 'visible'; closeButton.style.visibility = 'visible'; newWin.document.close(); setTimeout(function(){newWin.close();},10); } Button for printing: <input type="button" id="printButton1" class="btn btn-success" onclick="printDiv('invoice')" value="Print Invoice" /> Is there something wrong here or am I just missing something? Cheers, Dan Quote Link to comment https://forums.phpfreaks.com/topic/315815-printing-div-loses-style-in-preview/ Share on other sites More sharing options...
Moorcam Posted January 18, 2023 Author Share Posted January 18, 2023 I have changed the above code and tried this, adding a link to the CSS file of the website... function printDiv() { var divToPrint=document.getElementById('invoice'); var newWin=window.open('','Print-Window'); var cssURL='<?php echo base_url('public/css/style.css'); ?>'; var printButton = document.getElementById("printButton1"); var closeButton = document.getElementById("closeButton1"); newWin.document.open(); printButton.style.visibility = 'hidden'; closeButton.style.visibility = 'hidden'; newWin.document.write('<html><head><link href="'+cssURL+'" rel="stylesheet" type="text/css"></head><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>'); printButton.style.visibility = 'visible'; closeButton.style.visibility = 'visible'; newWin.document.close(); setTimeout(function(){newWin.close();},10); } Still not getting any styling in the print dialog. Quote Link to comment https://forums.phpfreaks.com/topic/315815-printing-div-loses-style-in-preview/#findComment-1604812 Share on other sites More sharing options...
Solution Moorcam Posted January 18, 2023 Author Solution Share Posted January 18, 2023 If anyone else wants this, here's what solved it for me... document.getElementById("printButton1").addEventListener("click", function() { var printContents = document.getElementById('invoice').innerHTML; var originalContents = document.body.innerHTML; var printButton = document.getElementById("printButton1"); var closeButton = document.getElementById("closeButton1"); document.body.innerHTML = printContents; document.getElementById('printButton1').style.visibility = 'hidden'; window.print(); document.body.innerHTML = originalContents; window.location.reload(true); }); Â Quote Link to comment https://forums.phpfreaks.com/topic/315815-printing-div-loses-style-in-preview/#findComment-1604815 Share on other sites More sharing options...
requinix Posted January 18, 2023 Share Posted January 18, 2023 In the modern world, we solve this problem with CSS media queries by hiding the elements of the page you don't want printed. Quote Link to comment https://forums.phpfreaks.com/topic/315815-printing-div-loses-style-in-preview/#findComment-1604816 Share on other sites More sharing options...
Strider64 Posted January 19, 2023 Share Posted January 19, 2023 People put too much into printing web pages. I created a simple blood pressure reading page (I'm trying to keep my blood pressure under control) and use simple CSS to print out the readings - A sample of the CSS: // Avoid page breaks straight after a heading. h1, h2, h3, h4, h5, h6 { page-break-after: avoid; } /* Avoid page breaks inside paragraphs, blockquotes, lists, and preformatted text. */ p, blockquote, ul, ol, dl, pre { page-break-inside: avoid; } @media print { header, footer { display: none; } } Here's the link to the page - https://www.phototechguru.com/print_bp.php Quote Link to comment https://forums.phpfreaks.com/topic/315815-printing-div-loses-style-in-preview/#findComment-1604823 Share on other sites More sharing options...
Moorcam Posted January 19, 2023 Author Share Posted January 19, 2023 Yeah I may need to look further into this. If more than one instance is created, for example, Tom buys tickets to two different events or whatever, the above JS will only work for printing the first instance. No idea why. Quote Link to comment https://forums.phpfreaks.com/topic/315815-printing-div-loses-style-in-preview/#findComment-1604826 Share on other sites More sharing options...
requinix Posted January 20, 2023 Share Posted January 20, 2023 14 hours ago, Moorcam said: If more than one instance is created, for example, Tom buys tickets to two different events or whatever, the above JS will only work for printing the first instance. No idea why. My guess: because you're relying on elements IDs instead of classes. Can only use an ID once per page. Quote Link to comment https://forums.phpfreaks.com/topic/315815-printing-div-loses-style-in-preview/#findComment-1604845 Share on other sites More sharing options...
Moorcam Posted January 20, 2023 Author Share Posted January 20, 2023 12 hours ago, requinix said: My guess: because you're relying on elements IDs instead of classes. Can only use an ID once per page. Yeah sorted mate. Sorry, meant to come back and update. But exactly as you said. Quote Link to comment https://forums.phpfreaks.com/topic/315815-printing-div-loses-style-in-preview/#findComment-1604851 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.