Jump to content

Printing Div loses style in preview


Moorcam
Go to solution Solved by Moorcam,

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • Solution

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);
});

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.