How can I print an image?

Question

I'd like to put up a page for a store with a coupon that people can print and bring to the store. I'm looking for a way to let them just print the coupon, and not the entire page.

I'm thinking that maybe if I put the coupon image into an iFrame, a print from there might just print the image, but I wanted to see first if there are already better, established ways to do this.

Thanks for any ideas.

See related question http://stackoverflow.com/questions/6500962/how-to-print-only-a-selected-html-element — Mihai8, Mar 14 '13 at 20:30

score 0 · Answer 1 · answered Mar 14 '13 at 20:25

0

With a print.css file, you can hide other site elements (via CSS display:none;) so that on a page with the coupon on, only the coupon appears when printed.

Here is a good article on print.css: http://alistapart.com/article/goingtoprint

answered Mar 14 '13 at 20:25

Richard Pursehouse

1,109
13
21

score 0 · Answer 2 · answered Mar 14 '13 at 20:27

In your css:

@media print {

    .elementsToHide { 
        display:none; 
    }

    #coupon {
        display:block; 
    }
}

Also, check out this article on the subject : http://coding.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/

score 0 · Answer 3 · answered Mar 20 '13 at 13:50

It's possible that this answer is late, but if you want the user to print just the picture, then I think the best approach is to:

Open a new page in a new window/tab which only contains the image (just the <img> tag in the <body> tag). This way the user can select print from the menu and just print the picture.

This way it is clear for the user what gets printed.

Also you could pop up a print dialog with window.print which is not in specifications but will work in all the desktop browsers regardless.

Some clarification:

I know about print styles, and that you can completely reorder your page with them, but I found that a user actually expects the same layout to be printed what she/he sees on the monitor. By making and showing a new page just for printing the user gets a "preview" of what will get printed and therefore he will be more confident to print it.

How can I print an image?

3 Answers3