PDA

View Full Version : Window.print Prints Incorrect Content in Google Chrome



gr8dane
Jan 19th, 2012, 02:27 AM
I'm having trouble getting Google Chrome to print the correct content when I change the content of a modal page with JavaScript. This is my code:

JavaScript:

function printCoupon(couponID)
{
var originalContents = document.body.innerHTML;
var printable = document.getElementById(couponID);
var printContents = printable.innerHTML;

document.body.innerHTML = printContents;

window.print();

document.body.innerHTML = originalContents;
document.getElementById(couponID).scrollIntoView(true);
}

HTML:

<body>
<div id="coupon1"><p>Coupon 1 contents</p></div>
<div><a href="javascript:void(0)" onclick="printCoupon('coupon1');return false;">Print Coupon</a></div>
<div id="coupon2"><p>Coupon 2 contents</p></div>
<div><a href="javascript:void(0)" onclick="printCoupon('coupon2');return false;">Print Coupon</a></div>
</body>

This works in IE8 and FF 3.6, but Chrome 16 prints the original content, not the printable content.

UPDATE: I just discovered another problem with this script. In IE9, the parent page is printed along with the modal (the modal looks transparent), instead of just the modal.

felgall
Jan 19th, 2012, 03:41 AM
You might have better success if you leave the HTML alone and just hide the parts of the page you don't want printed via the stylesheet.

gr8dane
Jan 20th, 2012, 12:46 AM
Thanks for the suggestion, felgall, but that would have been too complicated to implement.

The solution I found was to split the script into three scripts (before, during and after print) and use setTimeout on the second two. It (somehow) took care of both my problems.