Log in

View Full Version : Printing button to print different page


arieta
04-09-2010, 01:12 AM
Hey,

I'm still learning and just needed some help. Basically I want to add a link on a webpage, that contains the web-friendly version of a document, so that when you click on the link, it will print the printer-friendly version (a pdf). So far, I've got this:




<a href="##" onclick="window.print()"> Click here to download the printable version</a>



But when I click it, it prints a blank page with just the URL and the date. Is there something I'm missing? Or is this even possible?
BLiZZaRD
04-09-2010, 01:37 AM
Well, without the javascript to tell window print what to print, it has nothing to print. (Since you reference a blank (non-existent) HTML page with the ##

try this:



<a href="/path/to/file.pdf" onClick="window.print();return false">Click here to download the printable version</a>


Return false cancels the default action, which is to link to "/path/to/file.pdf". By canceling the default action, the text becomes exclusively a link that prints a document, which is what we want in this case. Or you could make the text an image or a button instead. Same difference.
arieta
04-09-2010, 02:17 AM
oh sorry!!:o I forgot to put in the link:

I tried this and it still printed a blank page:confused:.


<a href="http://www.mmanager.com/docs/specs/MM_T.38_IP_Fax_Solutions_for_Avaya.pdf" onClick="window.print();return false">Click here to download the printable version</a></font>
jscheuer1
04-09-2010, 02:25 AM
The window.print() method does exactly that. So a page with just:


<a href="##" onclick="window.print()"> Click here to download the printable version</a>
Hi

on it will print:


Click here to download the printable version Hi

when Click here to download the printable version is clicked.

Changing the href will only change what happens after/during the the page is being printed. If the href is to a valid URL, the browser will switch to it.

In fact, with ## as the href, the browser will display the current URL in the address bar with ## appended to it.

The best thing to do in this sort of situation is generally to forget about a PDF. You could link to one by doing something like so:


<a href="some.pdf">View PDF Version for Printing</a>

But you can't make it automatically print, except in perhaps some IE browsers, and that's a long story, useless really when you consider all of the other browsers people use these days.

What you can do is make up a print stylesheet. Then when folks print the current page, if your print stylesheet is well thought out, it will print the current page in a manner suitable to most printers. You can even get it so that only certain parts of the current page will be printed.
BLiZZaRD
04-09-2010, 02:36 AM
What I do when I want to do this is put this in th e<head> of my page:



<link rel=alternate media=print href="http://path/to/file.doc">


Then when the visitor chooses File>>Print they get the alternate page as specified. I am wondering if the fact it is PDF makes any trouble, as usually a PDF is a direct to save or open type of file...

Never done it with a button for printing, although I don't see the difference between that (as you have) and choosing file>>print.

Add the above to your head section and see what happens.
arieta
04-09-2010, 03:18 AM
OOH!! ok.. i see why my first code didn't work.. thanks..

i added to the <head> of the page.


<link rel=alternate media=print href="http://www.mmanager.com/docs/specs/MM_T.38_IP_Fax_Solutions_for_Avaya.pdf">


Still prints a blank page.

The pdf that I want to link is a a4 2 page document. and there are several documents that I need to apply this to.. so if I forget about the pdf, does that mean I have to create a new page for each that includes a print stylesheet?

the problem with having a link to open the printer friendly version, is that my boss doesn't want to have another window open to have the ability to print. He just wants them to be able to view the web version, and if they wanted to print it out, they would click on the print button and the print version would print. is this an unreasonable ask? if so, I may have to present him with a different option..instead of trying to achieve what he's asking for, as it may not be possible.

So sorry for being difficult.. :o
jscheuer1
04-09-2010, 04:42 AM
We are really confusing two things here. When you do:


<link rel=alternate media=print href="http://path/to/file.doc">

That only works in IE as far as I know, and may or may not include PDF files. I'm not sure if even when it is the 'right' sort of file if it works in all IE browsers.

In any case, that's completely different from using a print stylesheet. Here is a very basic example of using a print stylesheet (stylesheets may be external, in fact that's preferred):


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="screen">
/*whatever your usual style is can go here*/
</style>
<style type="text/css" media="print">
div {
display:none;
}
.printable {
display:block;
}
</style>
</head>
<body>
<div>
Stuff Here at the top we don't want printed
</div>
<div class="printable">
We want this printed
</div>
<div class="printable">
this too.
</div>
<div>
Stuff here at the bottom we don't want printed.
</div>
</body>
</html>

In virtually all browsers (including IE) that will print as:


We want this printed
this too.

The class and/or id names as well as the rules you use are up to you and it can be as complex or simple as you like. Just be aware that if something you want printed is inside of something that you don't want printed, it will inherit things like display and visibility from the thing you don't want printed. So it's best to keep them separate like in the above example.

Note: If using an external print stylesheet, it may be referenced like so:


<link rel="stylesheet" href="print.css" media="print" type="text/css">
soniauser
03-02-2013, 12:31 PM
Arieta, did you ever got an answer about this? I am also trying to also put a "print this page" button on my site, that will print an altetrnate "PDFversion" of my page. Id you find out how to do it?
Thansk!