Trent Richardson
I ran into a need for a print preview on my website the other day and was unable to find a quick solution, so with a little thought I whipped up a small function which does just that with CSS and Javascript. Here’s what I come up with:
<link id=”screenCSS” media=”all” rel=”stylesheet” type=”text/css” />
<link id=”printCSS” media=”print” rel=”stylesheet” type=”text/css” />
<script language=”javascript”>
function togglePrintPreview()
{
var currCSS = document.getElementById(‘printCSS’);
if(currCSS.media == ‘all’)
currCSS.media = ‘print’;
else currCSS.media = ‘all’;
}
</script>
Pretty simple theory.. just toggle the media attribute of the link tags from “print” to “all”. Maybe a little dumb,.. but very practical. View Example
Related posts:
13 Responses
Manny
25|May|2008Excellent and simple sollution! I had another question, is it possible to create a button that actually launches the IE or Firefox Print Preview window?
trent
25|May|2008To my knowledge there is no way to launch the print preview. If at all possible I would say you would be able to in IE with ActiveX
Dips
05|Jan|2009Hi, is there any way to get the button to open up a new window which then displays the “print preview” of the content?
trent
06|Jan|2009You might have to do a little extra programming to do so. Maybe open a window with your file(mypage.php) and pass some type variable on the url ( mypage.php?printpreview=1 ). Then you can either use your serverside language or javascript to check for this variable. javascript might be easier since you’re already using it to accomplish the print preview:
if(getURLVariable(“printpreview”) == 1)
togglePrintPreview()
Note that getURLVariable is a function which you would have to write to retrieve url variables, these are easy to find with some googleing..
Tim
12|Feb|2009Thanks for the great solution. I would like to suggest the use of a specific style sheet for preview, in the event that you do not want to print the link that toggles the style sheet. If the link is hidden in the print style sheet, then it will not be possible to toggle the view back to normal.
GH
22|Mar|2009Thanks for the great idea. Let me have a suggestion. Why don’t you include both css files, so it is a great help to the new users.
Ulyses
08|Jun|2009simple, complete and efective. than you.
Santhana
13|Aug|2009Well i dont know about firefox but with IE you can sure have a button or a link go to print preview or print directly accordint to ur requirements. Firefox just goes to print staight away.
have a look at this
insert this javascript
function PrintPage(){
var OLECMDID = 7;
if (navigator.appName == “Microsoft Internet Explorer”){
var PROMPT = 1;
var WebBrowser = ”;
document.body.insertAdjacentHTML(‘beforeEnd’, WebBrowser);
WebBrowser1.ExecWB(OLECMDID, PROMPT);
WebBrowser1.outerHTML = “”;
}
else
{
window.print();
}
}
*******************************************************************
If you need more OLEMDID enumerastions to use
/* OLECMDID values:
* 6 – print
* 7 – print preview
* 1 – open window
* 4 – Save As
*/
if you need even more check this out
http://msdn.microsoft.com/en-us/library/ms691264(VS.85).aspx
***************************************************************
Sev
28|Aug|2009Hi, Good post.
I came up with something very similar for a client’s site and then found that it worked in IE7/IE8/FireFox3 but not in Google Chrome.
It turned out that it was because the previous developer had included the stylesheets using
@import “file.css”;
With IE and FireFox the dynamic switch to media=”all” still worked, however with Chrome it would change the value but ignore it!
Updating the code to declare the stylesheets in the normal way using a tag did the trick, and Chrome started co-operating too. Hopefully this might be of use to someone faced with the same odd problem.
ClubPenguin
18|Jun|2010To my knowledge there is no way to launch the print preview. If at all possible I would say you would be able to in IE with ActiveX.
Leslie
13|Oct|2010Hi,
Good idea and this is what i have been looking for.
The problem is i can’t get it to work in all the IE version. Any idea?
http://www.minteditions.com.sg/staging/cit/html/asset-portfolio/asset-details.html
This currently my staging site for my work.
User11
25|May|2011You may try VIEWidget from
http://hexatech.com/viewidget
It works with all major browers.
It is a javascript-programmable report & technical drawing generator and print preview control.
You may use VIEWidget to generate reports or technical drawings,
display the results in a scrolling and zooming viewer on your web page and then print it.
It is a very flexible and productive RAD tool as it lets you freely draw tables or
other objects at arbitrary x-y coordinates.
Below is a simple Hello World example with two print-preview pages generated:
//get length unit
var INCH = control1.getInch();
//create document
control1.startDoc();
control1.drawString(1*INCH, 1*INCH, “Hello World from Page 1″);
//…draw other stuff here
//create 2nd page
control1.newPage();
control1.drawString(1*INCH, 1*INCH, “Hello World from Page 2″);
//…draw other stuff here
//end document
control1.endDoc();
//preview first page (page index=0)
control1.setCurrentPage(0);
control1.preview();
Web Hosting Provider
08|Dec|2011Thank you providing the JavaScript…It really good one.