在浏览器中打印图像

我正在尝试在html页面中显示print图像。说一些100个图像，每个页面一个。我在html内容中添加了图像，并将其添加到iframe标记中并尝试打印。图像在底部切割，其余部分移动到下一页。我如何克服这一点？在浏览器中打印图像

我附上了一个简单的代码片段来打印一个简单的图像。请尝试运行的代码片段，并建议我一个解决方案来打印图像中的单个页面

<!DOCTYPE html> 
 
<html moznomarginboxes mozdisallowselectionprint> 
 

 
<head> 
 
    
 
</head> 
 

 
<body> 
 

 
    <button id="btn1" type="button" onclick="myFunction()">Print</button> 
 
    <br/> 
 
    <img src="http://i.stack.imgur.com/bFvfE.jpg" style="border:1px solid" /> 
 

 
</body> 
 

 
<script> 
 
    function myFunction() { 
 
    //window.print(); 
 
    var iframe = document.createElement('iframe'); 
 
    iframe.name = "printFrame"; 
 
    iframe.style.position = "absolute"; 
 
    iframe.style.top = "-100000000px"; 
 
    document.body.appendChild(iframe); 
 
    var frameDoc = iframe.contentWindow ? iframe.contentWindow : iframe.contentDocument.document ? iframe.contentDocument.document : iframe.contentDocument; 
 
    frameDoc.document.open(); 
 
    frameDoc.document.write('<html moznomarginboxes mozdisallowselectionprint><head><style>@media print {div { page-break-inside: avoid;} @page{margin:0;} body{margin:0;}}</style></head><body><center>'); 
 
    frameDoc.document.write('<div><img src="http://i.stack.imgur.com/bFvfE.jpg" style="border:1px solid;margin:0px;display:block"/></div><br/>'); 
 
    frameDoc.document.write('</center></body></html>'); 
 
    frameDoc.document.close(); 
 
    setTimeout(function() { 
 
     window.frames["printFrame"].focus(); 
 
     window.frames["printFrame"].print(); 
 
     document.body.removeChild(iframe); 
 
    }, 500); 
 
    } 
 
</script> 
 

 
</html>

来源

2016-03-03 Uthistran Selvaraj.

给您的文档的高度，然后将图像以填补尽可能多的空间父元素（HTML，身体）允许：

CSS

html, body { height: 100%; } 
img { height: 100%; width: auto; }

这似乎是解决一切：

html, body { height: 100%; } 
img { height: 100%; width: auto; display: block; } 
@media print { 
    body { margin: 0; } 
    img { box-sizing: border-box; } 
    br, button { display: none; } 
}

来源

2016-03-03 11:35:18 SomeGuy

-1

你必须要写@media所有的浏览器（即FF和铬）查询打印您的html或网页。我正在使用@media查询打印网页。看下面的链接。

http://www.richmondau.com/

你得到了解决。

来源

2016-03-03 09:02:09 Ankit

你能帮我修改我的代码片段吗 –

在浏览器中打印图像

回答

相关问题