從多個iframe打印預覽？

Question

我在頁面中有幾個iframe。我想在打印預覽中顯示所有iframe內容作爲iframe的快照。我用window.print()爲個別iframes，它工作正常，但我怎麼做多幀？

Answer 1

您需要將所有框架逐一聚焦併合併到打印報告中。

可以實現它，使用此代碼：

HTML：

<button id="printButton" onclick="javascript:printPage()" >Print this page</button> 

<h1 id='header'><b>Awesome Print Report</b></h1> 
<iframe id="ifr1" src="http://amazon.com"></iframe> 
<iframe id="ifr2" src="http://amazon.com"></iframe> 
<iframe id="ifr3" src="http://amazon.com"></iframe> 
<iframe id="ifr4" src="http://amazon.com"></iframe> 
<iframe id="ifr5" src="http://amazon.com"></iframe> 
<iframe id="ifr6" src="http://amazon.com"></iframe> 

的JavaScript：

function printPage() { 

    window.print(); 

    for (var k = 0; k < window.frames.length; k++) { 
     window.frames[k].focus(); 
     window.frames[k].print(); 
    } 

} 

CSS：

#header { 
    margin - top: 20px; 
} 

@media print { 
    #printButton { 
     display: none; 
    } 
} 

此CSS將隱藏打印報告上的打印按鈕。

這裏的jsfiddle你：http://jsfiddle.net/zur4ik/r7pvF/

Answer 2

如果iframe預覽可能只是靜態圖像，你可以做到以下幾點：

• 提供隱藏的圖像（預覽）旁邊的每個iframe
• 使用提供打印機獨立的CSS文件media queries
• 在這個文件中，隱藏iframe並顯示圖像

如果你這樣做，你將有圖像預覽而不是打印視圖中的iframe。

Answer 3

我認爲這裏最大的問題是從不同的框架中獲取內容到一個可以打印的視圖中。無論你想要這個在.pdf或window.print()。是否有可能將需要打印的所有幀的內容放入一個文檔（幀）中？例如使用AJAX，cURL或PHP方法？我認爲這是製作一個可打印文檔的唯一方法。

祝你好運！

Answer 4

月這段代碼對你有幫助..

HTML：

<input type="submit" value="Print All" 
    onclick="javascript:printall()" 
/> 
<p>Hi! I'm a report!</p> 
<iframe id="frame1" src="http://indiabix.com"></iframe> 
<iframe id="frame2" src="http://indiabix.com"></iframe> 
<iframe id="frame3" src="http://indiabix.com"></iframe> 
<iframe id="frame4" src="http://indiabix.com"></iframe> 

腳本

function printall() { 
    window.print(); 
    for (var i=0; i<window.frames.length; i++) { 

    window.frames[i].focus(); 
    window.frames[i].print(); 
    } 
} 

小提琴：http://jsfiddle.net/ackMC/5/