私のアプリケーションの特定の部分を印刷しようとしています。ウェブページの特定の部分を印刷する
アプリケーションには、ユーザーのリストがあり、姓と名が表示されます。ユーザーをクリックすると、詳細な情報が表示されたポップアップが表示されます。
クリックしたユーザーのポップアップを印刷するにはどうすればいいですか？ ポップアップは次のようになります。
<div id="user<?=$user->id;?>" class="popup">
<div class="details">
User details...
</div>
<a href="#print">Print</a>
</div>
印刷ボタンはいえ、まだ機能していません。
単純なJavaスクリプトを使用して、ページの特定のdivを印刷することができます。
var prtContent = document.getElementById("your div id");
var WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
あなたは、ユーザーが
Javscript印刷できるようにしたい情報だけを含む新しいウィンドウを開きます（または新しいページに移動）しなければならない：
function printInfo(ele) {
var openWindow = window.open("", "title", "attributes");
openWindow.document.write(ele.previousSibling.innerHTML);
openWindow.document.close();
openWindow.focus();
openWindow.print();
openWindow.close();
}
HTML：
<div id="....">
<div>
content to print
</div><a href="#" onclick="printInfo(this)">Print</a>
</div>
ここにいくつかの注釈があります。アンカーは、印刷するコンテンツを含むdivと空白を入れてはいけません。
これは素晴らしいです！もちろん、あなたのアイテムの後ろにプリントリンクがないようにしたいのであれば、それはちょっと面白いですね。私はhrefにIDを与え、Printを非分割領域に変更し、getElementByIdを使用してclick（）イベントを他の場所で参照することで、その課題を解決しました。ありがとうございました！！ – Mmm
いいえ - 単にCSS media = "print"を使用してください –
としては、ここでは答え：https://stackoverflow.com/a/1072151/421243、あなたは、JavaScriptを使用して隠されたフレームに特定のセクションを追加し、それを集中し、それを印刷することができます。
これはjavascriptである –
printPageArea()の機能では、印刷する特定のdiv IDを渡します。私はcodexworld.comからこのJavaScriptコードを見つけました。
function printPageArea(areaID){
var printContent = document.getElementById(areaID);
var WinPrint = window.open('', '', 'width=900,height=650');
WinPrint.document.write(printContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
}
完全なコードとチュートリアルは、How to Print Page Area using JavaScriptから見つけることができます。
私は、選択した要素のHTMLを印刷するには、このjQueryの拡張機能を作った：$('#div2').print();
$.fn.extend({
print: function() {
var frameName = 'printIframe';
var doc = window.frames[frameName];
if (!doc) {
$('<iframe>').hide().attr('name', frameName).appendTo(document.body);
doc = window.frames[frameName];
}
doc.document.body.innerHTML = this.html();
doc.window.print();
return this;
}
});
は、アクションhereでそれを参照してください。
代わりに、すべての複雑なJavaScriptを、あなたは実際に簡単なCSSでこれを達成することができます：ちょうど印刷したいONLYコンテンツの表示のための2つのCSSファイル、通常の画面表示のための1つ、および別のものを使用しています。この後者のファイルでは、印刷したくないものをすべて隠し、ポップアップだけを表示します。
は、両方のCSSファイルのmedia属性を定義することを忘れないでください：ここで
<link rel="stylesheet" href="screen-css.css" media="all" />
<link rel="stylesheet" href="print-css.css" media="print" />
を私たちは、CSSファイルをロードするか、印刷する部分での画像参照があるというのが私の拡張バージョンです。
このような場合、print（）関数を呼び出す前に、cssファイルまたはイメージが完全に読み込まれるまで待つ必要があります。そのため、print（）とclose（）関数呼び出しをhtmlに移行する方がよいでしょう。次にコード例を示します。
var prtContent = document.getElementById("order-to-print");
var WinPrint = window.open('', '', 'left=0,top=0,width=384,height=900,toolbar=0,scrollbars=0,status=0');
WinPrint.document.write('<html><head>');
WinPrint.document.write('<link rel="stylesheet" href="assets/css/print/normalize.css">');
WinPrint.document.write('<link rel="stylesheet" href="assets/css/print/receipt.css">');
WinPrint.document.write('</head><body onload="print();close();">');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.write('</body></html>');
WinPrint.document.close();
WinPrint.focus();
CSSを使用して、印刷したくないコンテンツを隠すだけです。 ユーザが印刷を選択 - 「。ページのレイアウトに関する手順については、 CSS
メディア= 『ページでは「メディア=」印刷になります印刷』 CSSは、コンテンツを非表示に指示を持っています私たちが印刷されたくないという。
<!-- CSS for the things we want to print (print view) -->
<style type="text/css" media="print">
#SCREEN_VIEW_CONTAINER{
display: none;
}
.other_print_layout{
background-color:#FFF;
}
</style>
<!-- CSS for the things we DO NOT want to print (web view) -->
<style type="text/css" media="screen">
#PRINT_VIEW{
display: none;
}
.other_web_layout{
background-color:#E0E0E0;
}
</style>
<div id="SCREEN_VIEW_CONTAINER">
the stuff I DO NOT want printed is here and will be hidden -
and not printed when the user selects print.
</div>
<div id="PRINT_VIEW">
the stuff I DO want printed is here.
</div>
これはうまくいく - とても簡単で分かりやすいです - ありがとう！ :) –
の可能重複[
だけ印刷？]（http://stackoverflow.com/questions/468881/print-div-id-printarea-div -only） –