I have a simple HTML document which includes an image tag only. I want to print the image after document's loaded. my code:
<body>
<img id="form1" src="form1.jpg" alt="form1" style="margin: 0 auto;display:block;" onLoad="javascript:window.print()" />
</body>
it works but the problem is that it prints both the image ( webpage ) and another paper which is empty and only has a text on top which is giving the address of image and html title. how can I prevent from printing the extra paper ?
P.S : I used jquery plugins like PrintElement.js, jqPrint.js, etc, but they have same problem...
I have a simple HTML document which includes an image tag only. I want to print the image after document's loaded. my code:
<body>
<img id="form1" src="form1.jpg" alt="form1" style="margin: 0 auto;display:block;" onLoad="javascript:window.print()" />
</body>
it works but the problem is that it prints both the image ( webpage ) and another paper which is empty and only has a text on top which is giving the address of image and html title. how can I prevent from printing the extra paper ?
P.S : I used jquery plugins like PrintElement.js, jqPrint.js, etc, but they have same problem...
Share Improve this question edited Feb 2, 2013 at 13:33 karthikr 99.7k26 gold badges207 silver badges191 bronze badges asked Feb 2, 2013 at 12:54 Payam ShakibafarPayam Shakibafar 1,1353 gold badges12 silver badges25 bronze badges 5-
You can use CSS for controlling the image size, etc for print - using
@media print { /* your print conditions here. */ }– karthikr Commented Feb 2, 2013 at 13:02 - how can i remove the second paper by '@media print' options ? – Payam Shakibafar Commented Feb 2, 2013 at 13:14
-
1
Give the image a
max-width. That way, you can control how the image renders on the page. Example:@media print { body img {width: 90%; max-width: 1048px; } }– karthikr Commented Feb 2, 2013 at 13:14 - It worked, thank you so much karthikr <3 – Payam Shakibafar Commented Feb 2, 2013 at 13:31
- great.. Making this an answer for future reference :) – karthikr Commented Feb 2, 2013 at 13:32
3 Answers
Reset to default 4You can use CSS for controlling the image size, etc for print - using @media print
Give the image a max-width.
That way, you can control how the image renders on the page. Example:
@media print {
body img {
width: 90%; max-width: 1048px;
}
}
Scale down the image a little bit and center it with margin.
<img src="form1.jpg" width="90%" style="margin:auto;"/>
You Can Make a iframe tag by js and Put Image On it Then Print only iframe.
I hope it Work
<iframe id="iframeprint" style="display:none"></iframe>
maybe You Need This js Code
access To inside Of iframe
document.getElementById('iframeprint').contentWindow.document.body.innerHTML=document.getElementById('form1');
print iframe only
document.getElementById('iframeprint').contentWindow.print() ;