web-dev-qa-db-ja.com

Javascript印刷iframeコンテンツのみ

これは私のコードです

<script>
var body = "dddddd"    
var script = "<script>window.print();</scr'+'ipt>";

var newWin = $("#printf")[0].contentWindow.document; 
newWin.open();
newWin.close();

$("body",newWin).append(body+script);

</script>
<iframe id="printf"></iframe>

これは機能しますが、親ページを印刷します。iframeだけを印刷するにはどうすればよいですか？

javascriptjqueryprinting
57
user1083382

私はそれがうまくいくとは思わないだろう

代わりに試してください

window.frames["printf"].focus();
window.frames["printf"].print();

そして使用

<iframe id="printf" name="printf"></iframe>

または、古き良きを試してください

var newWin = window.frames["printf"];
newWin.document.write('<body onload="window.print()">dddd</body>');
newWin.document.close();

jQueryがハッキングできない場合

ライブデモ

110
mplungjan
document.getElementById("printf").contentWindow.print();

同じオリジンポリシー が適用されます。

16
Salman A

簡単な方法（ie7 +、firefox、Chrome、safariでテスト済み）はこれでしょう

//id is the  id of the iframe
function printFrame(id) {
            var frm = document.getElementById(id).contentWindow;
            frm.focus();// focus on contentWindow is needed on some ie versions
            frm.print();
            return false;
}
11
Kiarash

適切な場合とそうでない場合があるが、次の場合はよりクリーンな代替オプション。

ページからiframeを常に印刷する場合は、iframe以外のすべてを非表示にする別の「@media print {}」スタイルシートを使用できます。その後、通常どおりにページを印刷できます。

9
Evert

次のコマンドを使用できます。

document.getElementById('iframeid').contentWindow.print();

このコマンドは基本的にwindow.print（）と同じですが、印刷したいウィンドウがiframeにあるため、最初にそのウィンドウのインスタンスをjavascriptオブジェクトとして取得する必要があります。

そのため、そのiframeを参照して、まずidを使用してiframeを取得し、次にcontentWindowがwindow（DOM）オブジェクトを返します。そのため、このオブジェクトでwindow.print（）関数を直接使用できます。

7
Perx

IE8で上記のすべてのソリューションに問題がありましたが、IE 8 + 9、Chrome、Safari、Firefoxでテストされている適切な回避策が見つかりました。私の状況では、動的に生成されたレポートを印刷する必要がありました。

// create content of iframe
var content = '<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">'+
'<head><link href="/css/print.css" media="all" rel="stylesheet" type="text/css"></head>'+
'<body>(rest of body content)'+
'<script type="text/javascript">function printPage() { window.focus(); window.print();return; }</script>'+
'</body></html>';

Body closeタグの前にあるprintPage（）javascriptメソッドに注意してください。

次に、iframeを作成し、親ウィンドウに追加して、そのcontentWindowを使用できるようにします。

var newIframe = document.createElement('iframe');
newIframe.width = '0';
newIframe.height = '0';
newIframe.src = 'about:blank';
document.body.appendChild(newIframe);

次に、コンテンツを設定します。

newIframe.contentWindow.contents = content;
newIframe.src = 'javascript:window["contents"]';

ここでは、ダイナミックコンテンツ変数をiframeのウィンドウオブジェクトに設定し、javascript：スキームを介してそれを呼び出しています。

最後に印刷します。 iframeにフォーカスし、iframeコンテンツ内でjavascript printPage（）関数を呼び出します。

newIframe.focus();
setTimeout(function() {
  newIframe.contentWindow.printPage();
}, 200);
return;

SetTimeoutは必ずしも必要ではありませんが、大量のコンテンツをロードする場合、Chromeがそれなしでは印刷に失敗することがあるため、この手順をお勧めします。別の方法は、「newIframe.contentWindow.printPage（）;」をラップすることですtry catchで、setTimeoutラップバージョンをcatchブロックに配置します。

複数のブラウザでうまく機能するソリューションを見つけるのに多くの時間を費やしたので、これが誰かの助けになることを願っています。 SpareCycles に感謝します。

編集：

SetTimeoutを使用してprintPage関数を呼び出す代わりに、次を使用します。

newIframe.onload = function() {
    newIframe.contentWindow.printPage();
}
4
Jon TJ

現時点では、iframe内にスクリプトタグは必要ありません。これは私のために機能します（Chrome、Firefox、IE11、node-webkit 0.12でテスト済み）：

<script>
window.onload = function() {
    var body = 'dddddd';
    var newWin = document.getElementById('printf').contentWindow;
    newWin.document.write(body);
    newWin.document.close(); //important!
    newWin.focus(); //IE fix
    newWin.print();
}
</script>

<iframe id="printf"></iframe>

すべての答えのおかげで、私の日を救います。

3
Edakos

IE9以降でこのコードを使用します。

window.frames["printf"].focus();
window.frames["printf"].print();

IE8の場合：

window.frames[0].focus();
window.frames[0].print();
0
Bhavana

TypeScriptでこれを実装しようとして立ち往生し、上記のすべてが機能しませんでした。 TypeScriptがcontentWindowにアクセスできるようにするには、まず要素をキャストする必要がありました。

let iframe = document.getElementById('frameId') as HTMLIFrameElement;
iframe.contentWindow.print();
0
ModestMonk

Javascript document.write()を使用してIFrameのコンテンツを設定している場合は、newWin.document.close();でドキュメントを閉じる必要があります。

var frm = document.getElementById(id).contentWindow;
frm.focus();// focus on contentWindow is needed on some ie versions
frm.print();
0
Imran