Solved

javascript: override window.print()?

Posted on 2009-07-06
18
2,910 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
 
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to dynamically set the form action using jQuery.

708 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

13 Experts available now in Live!

Get 1:1 Help Now