在瀏覽器中打印圖像

我正在嘗試在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

你能幫我修改我的代碼片段嗎 –

在瀏覽器中打印圖像

回答

相關問題