3

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

4

5 に答える 5

6

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

于 2013-10-28T12:25:09.803 に答える
1

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

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/

于 2013-10-26T08:52:57.900 に答える
0

はい、親ウィンドウに印刷されるすべての 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()"
 />
于 2020-05-31T22:07:32.170 に答える