如何创建触发文件打印的链接？

Question

I have some small images and each has a "print larger image" link.

For example:

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

When the user clicks the "print larger image" link, my goal is to trigger the printing of "big.jpg".

How can this be done?

EDIT: ANTHONY HAD THE RIGHT SOLUTION FOR ME. I MODIFIED HIS CODE A BIT TO GET IT WORKING. HERE'S THE FULL, WORKING CODE

<style>
@media screen {
.printimage {
     display: none;
}
}

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

</style>

<a id="bigimage" href="#">Print Big Image</a>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
 $(document).ready(function(){

     $("#bigimage").click(function() {
          $("body").append("<img src='http://sstatic.net/so/img/logo.png' class='printimage' >");
          window.print();
     });

});

</script>

Answer 1

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;
}
}