/    Sign up×
Community /Pin to ProfileBookmark

Window.print Prints Incorrect Content in Google Chrome

Copy linkTweet thisAlerts:
Jan 19.2012

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:

[CODE]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);
}[/CODE]

HTML:

[CODE]<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>[/CODE]

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

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@gr8daneauthorJan 19.2012 — 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. Any help would be greatly appreciated.
Copy linkTweet thisAlerts:
@007JulienJan 19.2012 — It's could be done different results with global variables and different functions to prepare the page, print it and retrieve the initial page... More exactly a setTimeout to interrupt the script (and remove effectively the page) before the window.print() could be usefull.
Copy linkTweet thisAlerts:
@gr8daneauthorJan 19.2012 — More exactly a setTimeout to interrupt the script (and remove effectively the page) before the window.print() could be usefull.[/QUOTE]

I've actually discovered that it's apparently executing the command AFTER the window.print before the print dialog appears. How would I implement setTimeout to address that issue?
Copy linkTweet thisAlerts:
@007JulienJan 19.2012 — I thougth something like this
[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Untitled</title>
<style type="text/css">
</style>
<script type="text/javascript">
var originalContents,coupon;
function prepPrintCoupon(couponID){
originalContents = document.body.innerHTML;
coupon=couponID;
var printable = document.getElementById(couponID);
var printContents = printable.innerHTML;
document.body.innerHTML = printContents;
setTimeout(printCoupon,50);
}
function printCoupon(){
window.print();
setTimeout(endPrintCoupon,50);
}
function endPrintCoupon(){
document.body.innerHTML = originalContents;
document.getElementById(coupon).scrollIntoView(true);
}
</script>
</head>
<body>
<div id="coupon1"><p>Coupon 1 contents</p></div>
<div><a href="javascript:void(0)" onclick="prepPrintCoupon('coupon1');return false;">Print Coupon</a></div>
<div id="coupon2"><p>Coupon 2 contents</p></div>
<div><a href="javascript:void(0)" onclick="prepPrintCoupon('coupon2');return false;">Print Coupon</a></div>
</body>
</html>[/CODE]Another idea could be to use CSS with a media print to mask all the body elements, and to display, before printing, only the coupon to print...
Copy linkTweet thisAlerts:
@gr8daneauthorJan 19.2012 — Perfect!! That script is just what I needed. Thank you!

Now I just need to figure out why IE9 prints the parent window along with the shadowbox modal window. Any ideas?
Copy linkTweet thisAlerts:
@gr8daneauthorJan 20.2012 — You're a genius, 007Julien! It looks like your script even fixed my IE9 issue. THANK YOU!!!!
Copy linkTweet thisAlerts:
@monishafriendsMay 21.2012 — 007Julien : code is working fine on Mozilla and Chrome but some designing issue on IE8 and Mozilla.
×

Success!

Help @gr8dane spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...