2016-10-25 6 views
2

bPopUpを使用してjQueryでモーダルウィンドウをポップアップ表示するWebページがあります。javascriptを使ってポップアップウィンドウの内容を印刷するには?

このウィンドウの内容は、私が印刷したいものです(そしてメインページには何もありません)。

私は、コマンドwindow.print();を実行するためにポップアップウィンドウ上のボタンをリンクしようとしましたが、これはページの残りの部分を隠すポップアップウィンドウを表示するページ全体を印刷するだけです。

私はどのように私は唯一のポップアップウィンドウの内容を印刷することができ、何も知っていますか?

おかげ

+2

'console.log($("#popup ")。html())' –

+0

@SulthanAllaudeenは私の知らないことを申し訳なく思っていますが、または、ページの下部にある 'コンソール'にありがとう –

+0

jQuery 'html()':一致した要素のセットの最初の要素のHTMLコンテンツを取得するか、一致するすべての要素のHTMLコンテンツを設定します。もっと見る:http://api.jquery.com/html/ –

答えて

2

サンプルHTMP

<div id='DivIdToPrint'> 
    <p>This is a Popup which needs to be printed.</p> 
</div> 

<div> 
    <p>Do not print.</p> 
</div> 

<input type='button' id='btn' value='Print' onclick='printDiv();'> 

Javascriptを

function printDiv() 
{ 
var divToPrint=document.getElementById('DivIdToPrint'); 
var newWin=window.open('','Print-Window'); 
newWin.document.open(); 
newWin.document.write('<html><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>'); 
newWin.document.close(); 
setTimeout(function(){newWin.close();},10); 
} 

は、あなたのポップアップdiv要素にIDを付けて、上記の例を使用します。 ポップアップを正確に印刷するには、インラインスタイルを指定する必要があります。

+0

答えてくれてありがとう。私はそれを働かせることができた。あなたが説明したようにフォーマットをしなくても。フォーメーションを保存する方法がないと思うのは正しいのですか?たぶん新しいウィンドウや何かに関連するCSSファイルをロード?再度、感謝します? –

+0

cssファイルを読み込むことができれば、フォーマットを妨げる可能性があります。それをチェックする必要があります。 –

+0

ありがとう、ありがとう。私はそれが違いをもたらす場合Wordpressを使用していますか?あなたの助けをもう一度ありがとう:-) –

関連する問題