ansaurus

Question

How to create a link that triggers printing of a file?

Answer 1

A:

<img src="thumb.jpg" alt="Alternative text" />
<a href="big.jpg">Print Larger Image</a>

That's really basic HTML, no JS/PHP or whatsoever needed.

JoostK 2009-10-02 12:01:29

Answer 2

+1 A:

window.print() will do it in javascript, but that will only print the current page. If you're trying to launch the img into a new tab and run the print command, you'll have to combine a few commands.

Cory Dee 2009-10-02 12:02:31

Answer 3

+3 A:

<a href="javascript:window.Print(); return false;">Print Larger Image</a>

This will print the current page, but to add to JoostK's answer, redirect to the image:

<a href="page.php?image=big.jpg">Print Larger Image</a>

Then in page.php, load your image, and then in body onload event, call window.print();

EDIT:

To allow the user to stay on the same page, I don't believe is possible, but what you could do is:

<a href="page.php?image=big.jpg" target="_blank">Print Larger Image</a>

Then after calling window.print(); you can call window.close(); (this might pop a dialog box stating that the browser wants to close the current window is that ok, or something along those lines)

andrewWinn 2009-10-02 12:03:48

I would like the user to stay on the same page after the "print" button is clicked. Is there a way to make that happen with AJAX?

2009-10-02 12:21:09

Answer 4

A:

You can create a link like this to print the current page...

<a href="JavaScript:window.print();">Print this page</a>

or to auto print a page as soon as it loads, you can do something like this...

<body onload="window.print();">

rikh 2009-10-02 12:05:38

Answer 5

+1 A:

This would be really weird and awesome, but one thing you could do is:

Have the print large image link trigger a javascript function that inserts the larger image into the DOM with a class of "printable_image".

Then have your CSS rules set up with an @screen and @print rules that hide the image in the browser but hide everything but the image for the printout.

Then call the already mentioned window.print() function. The only catch is that users wouldn't see anything if they just wanted to print the screen, so you'd have to add the @print rule with the js to avoid this.

The HTML:

<img src="thumb.jpg">
<a href="#" id="bigimage">Print Larger Image</a>

The JS (in jquery):

$function() {
     $("#bigimage").click(function() {
          $(body).amend("<img src='bigimage.png' class="printimage" />");
     });
});

The CSS:

@media screen {
.printimage {
     display: none;
}
}

@media print {
body * {
    display: none;
}
.printimage {
     display: block;
}
}

Anthony 2009-10-02 12:27:31

good solution, but that sounds to me like too much work ;) Very creative. Plus there is always the possiblity that a user has javascript turned off . . . .

andrewWinn 2009-10-02 12:29:05

If they have js turned off, then none of the given solutions will work, homie.

Anthony 2009-10-02 12:33:58

true. you could just instruct the user to right click and open image :)

andrewWinn 2009-10-02 14:19:37

ansaurus

tags:

views:

answers:

How to create a link that triggers printing of a file?

related questions