Solved

javascript: override window.print()?

Posted on 2009-07-06
18
2,962 Views
Last Modified: 2012-06-27
Here's what I need:

1) User opts to print a webpage (IE, FF, Safari)
2) I need to execute some Javascript code on my elements to clean things up a bit
3) User is presented with print dialogue box and page to print

How can I override the window.print() command to execute some Javascript before the page is rendered for printing?  Any answer that includes jQuery code is acceptable.
0
Comment
Question by:noblends
  • 7
  • 6
  • 2
18 Comments
 
LVL 4

Expert Comment

by:eejones
ID: 24788863
How does the user choose to print the contents of the window? Do you have a button and onClick() or onSubmit() JavaScript?

How are you changing the page content with JavaScript? Are you using document.write or innerHTML or something else?

If you could paste some code it would help to understand your task.
0
 

Author Comment

by:noblends
ID: 24788925
The user prints the page either by a keyboard shortcut (ctrl+p) or through the browser's menu.  There are no "click this link to print" elements on my page.

With regards to changing the page using JS, there are a variety of things that need to be changed that only seem to with via JS, rather than a custom CSS print-only stylesheet.

For example, a page loads, then the majority of elements fade out.  If the user prints this page, the faded-out items do not render.  Using a CSS stylesheet (media="print") where all elements' opacity/visibility is set to 1/visible, will not make the elements render when printed.  It appears that I need to change the opacity of the elements before the page is actually rendered for print.

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24790529
Not sure if all browsers support it, but I believe there is a window.onprint event. But why can't the print css set the opacity?
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24792004
Ah

it was IE and it is
window.onbeforeprint=function() {
  // change opacity here
}
0
 
LVL 4

Expert Comment

by:eejones
ID: 24794254
Is it an option to let the user print in another way, by clicking a button on your page, which would allow you to fire off, onClick, some JavaScript statements and the print() function?


0
 

Author Comment

by:noblends
ID: 24794391
mplungjan: window.onbeforeprint() is exactly what I need, however it has to work in FF and Safari.

eejones: there's no room (nor do I want to make room) for a print button on the page.



As for why a media="print" stylesheet doesn't work - I'm not entirely sure but I suspect it's partly because I load all my pages using AJAX and then use a substantial amount of JS to style them.

You can see http://gdad.sva.edu/#blog for an example.  FF is the worst printer - doesn't even capture the whole page.
0
 

Author Comment

by:noblends
ID: 25177847
As far as I'm concerned, this cannot be done.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 25177948
1. don't fade
2. use <link rel="alternate" media="print" href="printable.pdf" />
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 25410803
the answers have been given
1. for IE use onBeforePrint
2. For all browsers give an alternative url for the print
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 25412224
Accept http:#25177948
Alternatively try this (not tested):

function printAll() {
  var w = window.open('','newwin');
  w.document.write('<body onLoad="window.focus(); window.print()">'+document.body.innerHTML+'</body>')
  w.document.close();
  return false
}
window.print=printAll;

0
 

Author Comment

by:noblends
ID: 25413685
That won't work because I don't have a Print button/link on the page.  Whatever javascript would be triggered (such as your window.open() method) would have to be triggered onPrint (so either when user presses ctrl+p or hits the print icon).  I've come to realize that this is simply not possible.
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 25414285
So that is the answer then - use link alternate to serve another page


0
 

Author Comment

by:noblends
ID: 25426067
This question should have been terminated weeks ago when I answered it myself on 8/25.  I've tried closing it many times however I've been unable to do so.  The last response by mplugjan was an answer, however if one follows the thread one would see that it does not answer my question (see my comment on 9/24).  

With regards to the grade, I know you're just trying to do the right thing, and now that I see what "C" means I'm more than willing to change it.  So how do I do that and how can I put this question to rest?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 25428769
Just one last comment. I repeatedly answered this. If the suggestions I gave you did not work for you, then the logical conclusion is that with your constraints the answer is : not possible.
That was the result already on the 25 of aug.
Thanks for reconsidering. It is not the points just the principle of not shooting the messenger or punishing the bearer of bad news
0
 

Author Closing Comment

by:noblends
ID: 31600327
Solution did not achieve original objective.
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
This video teaches users how to migrate an existing Wordpress website to a new domain.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

816 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now