Printable View
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:
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?Code:
<a href="##" onclick="window.print()"> Click here to download the printable version</a>
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:
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.Code:<a href="/path/to/file.pdf" onClick="window.print();return false">Click here to download the printable version</a>
oh sorry!!:o I forgot to put in the link:
I tried this and it still printed a blank page:confused:.
Code:<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>
The window.print() method does exactly that. So a page with just:
on it will print:HTML Code:<a href="##" onclick="window.print()"> Click here to download the printable version</a>
Hi
when Click here to download the printable version is clicked.Code:Click here to download the printable version Hi
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:
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.HTML Code:<a href="some.pdf">View PDF Version for Printing</a>
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.
What I do when I want to do this is put this in th e<head> of my page:
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...Code:<link rel=alternate media=print href="http://path/to/file.doc">
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.
OOH!! ok.. i see why my first code didn't work.. thanks..
i added to the <head> of the page.
Still prints a blank page.Code:
<link rel=alternate media=print href="http://www.mmanager.com/docs/specs/MM_T.38_IP_Fax_Solutions_for_Avaya.pdf">
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
We are really confusing two things here. When you do:
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.HTML Code:<link rel=alternate media=print href="http://path/to/file.doc">
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):
In virtually all browsers (including IE) that will print as:Code:<!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>
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.Quote:
We want this printed
this too.
Note: If using an external print stylesheet, it may be referenced like so:
HTML Code:<link rel="stylesheet" href="print.css" media="print" type="text/css">
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!