CODEWITHSUNDEEP
javascriptjqueryhtml
user5530775
user5530775

Reputation:

How do I print an image in my website without the HTML

Can someone please show me how to print an image in my web-page leaving behind the text and the HTML surrounding the image?

In my website the is a page that displays an image and it allows the users to print the image via a 

<a href="#" onclick="window.print()">PRINT</a>

link. The problem is the printed page comes with some HTML and some texts from the website. But I only want the image. Is there a way to get only the image and avoid everything else?

Thanks

Upvotes: 1

Views: 92

Answers (2)

A. Wolff
A. Wolff

Reputation: 74420

You should use CSS media query for that, e.g:

@media print {
    body *:not(img) {display:none;}
}
  • img or any more specific selector targeting the image you wish to print.

-DEMO jsFiddle-

Upvotes: 5

Varun
Varun

Reputation: 1946

One thing that you could do instead of calling the window.print directly is keep a hidden div in the bottom of the page. As soon as user click of the print button, dynamically add an image in the hidden div.Then just print the contents of the hidden div. Something like this in a function on click of the button,

var mywindow = window.open('', 'PRINT', 'height=400,width=600');

    mywindow.document.write('<html><head><title>' + document.title  + '</title>');
    mywindow.document.write('</head><body >');
    mywindow.document.write('<h1>' + document.title  + '</h1>');
    mywindow.document.write(document.getElementById("idOfYourHiddenDiv").innerHTML);
    mywindow.document.write('</body></html>');

    mywindow.document.close();
    mywindow.focus();

    mywindow.print();
    mywindow.close();

Upvotes: 0

Related Questions