javascript - 複数の iframe からプレビューを印刷しますか?

Question

ページに複数の iframe があります。すべての iframe コンテンツを iframe のスナップショットとして印刷プレビューで表示したいと考えています。個々の iframeに使用window.print()しましたが、正常に動作していますが、複数のフレームにはどうすればよいですか?

Answer 1

すべてのフレームを 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

このコードが役に立ちますように..

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/

Answer 3

はい、親ウィンドウに印刷されるすべての iframe のコンテンツを取得することが可能です。私はこのコードでそれを達成しました。

<script>

pages =[] // initiate an empty list here

function printPage() {

var frames = document.getElementsByTagName('iframe');
// get all the iframes and loop over them
// then push their innerHTML into the list
for (var i = 0; i < frames.length; i++){ 
        pages.push(frames[i].contentWindow.document.body.innerHTML); 
    ;
}
if (pages && pages.length) {

// this if statement, just checks to ensure our list is not empty before running the code.

// here is the magic, we now set the parent window to be equal to all the iframes innerHTML
    window.content.document.body.innerHTML = pages;
// then we print this new window that contains all the iframes
    window.print();
} 
else {
// do nothing
}


}

このソリューションを使用すると、iframe が 1 ページを超えた場合に iframe が切り取られるという問題も回避できます。

さらに、すべてのページを印刷する代わりに、印刷ダイアログ ボックスが 1 つだけ表示されます。

親ページの HTML には、printPage 関数を呼び出す以下のコードがあります。

<input type="submit" value="Print All"
  onclick="javascript:printPage()"
 />