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

01-19-2012, 03: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:


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

document.body.innerHTML = printContents;


document.body.innerHTML = originalContents;


<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>

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.

01-19-2012, 04: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.

01-20-2012, 01: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.