回答:
CSSのみを使用した一般的な解決策を以下に示します。これは動作することが確認されています。
@media print {
body * {
visibility: hidden;
}
#section-to-print, #section-to-print * {
visibility: visible;
}
#section-to-print {
position: absolute;
left: 0;
top: 0;
}
}
代替アプローチはあまり良くありません。displayいずれかの要素にdisplay:none子孫がある場合、その子孫はいずれも表示されないため、使用には注意が必要です。これを使用するには、ページの構造を変更する必要があります。
visibility子孫の可視性をオンにできるので、を使用するとうまくいきます。ただし、非表示の要素はレイアウトに影響を与えるためsection-to-print、左上に移動して適切に印刷されます。
position:fixed代わりに使用しない限り、コンテンツがオフセットされることです。ただし、ChromeとSafariでは、特に最初のページの後でコンテンツが切り捨てられます。したがって、私の最後の回避策は、ターゲットと そのすべての親の両方を設定することでしたoverflow:visible; position:absolute !important; top:0;left:0
#section-to-printはセクション自体と一致します。#section-to-print *セクションの各サブ要素に一致します。したがって、このルールはセクションとそのすべてのコンテンツを表示するだけです。
最小限のコードでより良いソリューションがあります。
次のようなIDを持つdiv内に印刷可能な部分を配置します。
<div id="printableArea">
<h1>Print me</h1>
</div>
<input type="button" onclick="printDiv('printableArea')" value="print a div!" />
次に、（上記のように）onclickのようなイベントを追加し、上記のようにdivのIDを渡します。
次に、本当に単純なJavaScriptを作成しましょう。
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
これがどれほど簡単であるかに注意してください。ポップアップ、新しいウィンドウ、クレイジーなスタイル、jqueryのようなJSライブラリはありません。本当に複雑なソリューションの問題（答えは複雑ではなく、私が言及しているものではありません）は、これがすべてのブラウザーで変換されることは決してないという事実です。スタイルを変更する場合は、チェックされた回答に示されているように、スタイルシートリンクにメディア属性を追加してください（media = "print"）。
綿毛がなく、軽量で、機能します。
.click。コードは非常に軽量なので、残念です。
これまでのすべての答えはかなり欠陥があります-それらはclass="noprint"すべてに追加することを含むか、display内で台無しにするでしょう#printable。
最善の解決策は、印刷できないもののラッパーを作成することだと思います。
<head>
<style type="text/css">
#printable { display: none; }
@media print
{
#non-printable { display: none; }
#printable { display: block; }
}
</style>
</head>
<body>
<div id="non-printable">
Your normal page contents
</div>
<div id="printable">
Printer version
</div>
</body>
もちろん、HTML内での移動を伴うため、これは完璧ではありません...
jQueryを使用すると、次のように簡単です。
w=window.open();
w.document.write($('.report_left_inner').html());
w.print();
w.close();これはうまくいきます：
<style type="text/css">
@media print
{
body * { visibility: hidden; }
#printcontent * { visibility: visible; }
#printcontent { position: absolute; top: 40px; left: 30px; }
}
</style>これは「可視性」でのみ機能することに注意してください。「表示」はそれをしません。FF3でテスト済み。
私はこれらの答えのいずれも全体としてあまり好きではありませんでした。クラス（たとえば、printableArea）があり、それをbodyの直接の子として持っている場合は、印刷CSSで次のようにすることができます。
body > *:not(.printableArea) {
display: none;
}
//Not needed if already showing
body > .printableArea {
display: block;
}別の場所でprintableAreaを探している場合は、printableAreaの親が表示されていることを確認する必要があります。
body > *:not(.parentDiv),
.parentDiv > *:not(.printableArea) {
display: none;
}
//Not needed if already showing
body > .printableArea {
display: block;
}可視性を使用すると、多くの間隔の問題と空白ページが発生する可能性があります。これは、可視性が要素のスペースを維持し、単に非表示にするためです。表示すると、表示が削除され、他の要素がそのスペースを占有できるようになります。
このソリューションが機能する理由は、すべての要素を取得するのではなく、身体の直接の子だけを取得して非表示にするためです。display cssを使用した以下の他のソリューションは、printableAreaコンテンツ内のすべてに影響を与えるすべての要素を非表示にします。
ユーザーがクリックする印刷ボタンが必要であり、標準のブラウザーの印刷ボタンでは同じ効果が得られないため、JavaScriptはお勧めしません。あなたが本当にそれをする必要がある場合、私がやろうとしていることは、ボディのhtmlを保存し、すべての不要な要素を削除し、印刷してから、htmlを追加し直すことです。ただし、前述のように、CSSオプションを使用できる場合は、これを回避します。
注：インラインスタイルを使用して、印刷CSSに任意のCSSを追加できます。
<style type="text/css">
@media print {
//styles here
}
</style>または、私が通常使用するように、リンクタグです。
<link rel="stylesheet" type="text/css" media="print" href="print.css" />IDを出力する要素を指定しますprintMe。
このスクリプトをヘッドタグに含めます。
<script language="javascript">
var gAutoPrint = true;
function processPrint(){
if (document.getElementById != null){
var html = '<HTML>\n<HEAD>\n';
if (document.getElementsByTagName != null){
var headTags = document.getElementsByTagName("head");
if (headTags.length > 0) html += headTags[0].innerHTML;
}
html += '\n</HE' + 'AD>\n<BODY>\n';
var printReadyElem = document.getElementById("printMe");
if (printReadyElem != null) html += printReadyElem.innerHTML;
else{
alert("Error, no contents.");
return;
}
html += '\n</BO' + 'DY>\n</HT' + 'ML>';
var printWin = window.open("","processPrint");
printWin.document.open();
printWin.document.write(html);
printWin.document.close();
if (gAutoPrint) printWin.print();
} else alert("Browser not supported.");
}
</script>関数を呼び出す
<a href="javascript:void(processPrint());">Print</a>hm ...印刷にスタイルシートのタイプを使用します...例：
<link rel="stylesheet" type="text/css" href="print.css" media="print" />print.css：
div { display: none; }
#yourdiv { display: block; }<script type="text/javascript">
function printDiv(divId) {
var printContents = document.getElementById(divId).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = "<html><head><title></title></head><body>" + printContents + "</body>";
window.print();
document.body.innerHTML = originalContents;
}
</script>ステップ1：ヘッドタグ内に次のJavaScriptを記述します
<script language="javascript">
function PrintMe(DivID) {
var disp_setting="toolbar=yes,location=no,";
disp_setting+="directories=yes,menubar=yes,";
disp_setting+="scrollbars=yes,width=650, height=600, left=100, top=25";
var content_vlue = document.getElementById(DivID).innerHTML;
var docprint=window.open("","",disp_setting);
docprint.document.open();
docprint.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"');
docprint.document.write('"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">');
docprint.document.write('<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">');
docprint.document.write('<head><title>My Title</title>');
docprint.document.write('<style type="text/css">body{ margin:0px;');
docprint.document.write('font-family:verdana,Arial;color:#000;');
docprint.document.write('font-family:Verdana, Geneva, sans-serif; font-size:12px;}');
docprint.document.write('a{color:#000;text-decoration:none;} </style>');
docprint.document.write('</head><body onLoad="self.print()"><center>');
docprint.document.write(content_vlue);
docprint.document.write('</center></body></html>');
docprint.document.close();
docprint.focus();
}
</script>ステップ2：onclickイベントでPrintMe（ 'DivID'）関数を呼び出します。
<input type="button" name="btnprint" value="Print" onclick="PrintMe('divid')"/>
<div id="divid">
here is some text to print inside this div with an id 'divid'
</div>CSS 3では、以下を使用できます。
body *:not(#printarea) {
display: none;
}Sandroの方法は非常に効果的です。
複数のprintMeリンクを許可できるように、特にタブ付きページや拡張テキストで使用できるように微調整しました。
function processPrint(printMe){ <-ここで変数を呼び出す
var printReadyElem = document.getElementById(printMe); <-変数を要求するためにprintMeの前後の引用符を削除しました
<a href="javascript:void(processPrint('divID'));">Print</a><-印刷するdiv IDを関数に渡して、printMe変数をdiv IDに変換します。一重引用符が必要です
printDiv（divId）：任意のページに任意のdivを印刷するための一般化されたソリューション。
同様の問題がありましたが、（a）ページ全体を印刷できるようにしたい、または（b）いくつかの特定の領域のいずれかを印刷したいです。上記の多くのおかげで、私のソリューションでは、印刷するdivオブジェクトを指定できます。
このソリューションの鍵は、適切なルールを印刷メディアスタイルシートに追加して、要求されたdiv（およびその内容）が印刷されるようにすることです。
まず、必要な印刷CSSを作成してすべてを抑制します（ただし、印刷する要素を許可する特定のルールはありません）。
<style type="text/css" media="print">
body {visibility:hidden; }
.noprintarea {visibility:hidden; display:none}
.noprintcontent { visibility:hidden; }
.print { visibility:visible; display:block; }
</style>新しいクラスルールを追加したことに注意してください。
次に、3つのJavaScript関数を挿入します。1つ目は、印刷メディアスタイルシートのオンとオフを切り替えるだけです。
function disableSheet(thisSheet,setDisabled)
{ document.styleSheets[thisSheet].disabled=setDisabled; } 2番目は実際の作業を行い、3番目は後でクリーンアップします。2番目（printDiv）は、印刷メディアスタイルシートをアクティブにし、新しいルールを追加して、目的のdivが印刷できるようにし、印刷を発行してから、最終的なハウスキーピングの前に遅延を追加します（そうでない場合、印刷が実際に行われる前にスタイルをリセットできます）完了。）
function printDiv(divId)
{
// Enable the print CSS: (this temporarily disables being able to print the whole page)
disableSheet(0,false);
// Get the print style sheet and add a new rule for this div
var sheetObj=document.styleSheets[0];
var showDivCSS="visibility:visible;display:block;position:absolute;top:30px;left:30px;";
if (sheetObj.rules) { sheetObj.addRule("#"+divId,showDivCSS); }
else { sheetObj.insertRule("#"+divId+"{"+showDivCSS+"}",sheetObj.cssRules.length); }
print();
// need a brief delay or the whole page will print
setTimeout("printDivRestore()",100);
}最後の関数は、追加されたルールを削除し、印刷スタイルを再び無効に設定して、ページ全体を印刷できるようにします。
function printDivRestore()
{
// remove the div-specific rule
var sheetObj=document.styleSheets[0];
if (sheetObj.rules) { sheetObj.removeRule(sheetObj.rules.length-1); }
else { sheetObj.deleteRule(sheetObj.cssRules.length-1); }
// and re-enable whole page printing
disableSheet(0,true);
}他にすべきことは、onload処理に1行追加して、印刷スタイルを最初は無効にして、ページ全体の印刷を可能にすることだけです。
<body onLoad='disableSheet(0,true)'>次に、ドキュメントのどこからでもdivを印刷できます。ボタンなどからprintDiv（ "thedivid"）を発行するだけです。
このアプローチの大きなプラスは、ページ内から選択したコンテンツを印刷するための一般的なソリューションを提供します。また、含まれるdivを含む、印刷される要素の既存のスタイルを使用できます。
注：私の実装では、これは最初のスタイルシートでなければなりません。後でシートシーケンスで作成する必要がある場合は、シート参照（0）を適切なシート番号に変更します。
@Kevin Florida同じクラスのdivが複数ある場合は、次のように使用できます。
<div style="display:none">
<div id="modal-2" class="printableArea">
<input type="button" class="printdiv-btn" value="print a div!" />
</div>
</div>Colorbox内部コンテンツタイプを使用していた
$(document).on('click', '.printdiv-btn', function(e) {
e.preventDefault();
var $this = $(this);
var originalContent = $('body').html();
var printArea = $this.parents('.printableArea').html();
$('body').html(printArea);
window.print();
$('body').html(originalContent);
});私の場合、ページ内に画像を印刷する必要がありました。私が投票したソリューションを使用したとき、1つの空白のページともう1つのページに画像が表示されていました。それが誰かを助けることを願っています。
ここに私が使用したCSSがあります：
@media print {
body * {
visibility: hidden;
}
#not-print * {
display: none;
}
#to-print, #to-print * {
visibility: visible;
}
#to-print {
display: block !important;
position: absolute;
left: 0;
top: 0;
width: auto;
height: 99%;
}
}私のhtmlは：
<div id="not-print" >
<header class="row wrapper page-heading">
</header>
<div class="wrapper wrapper-content">
<%= image_tag @qrcode.image_url, size: "250x250" , alt: "#{@qrcode.name}" %>
</div>
</div>
<div id="to-print" style="display: none;">
<%= image_tag @qrcode.image_url, size: "300x300" , alt: "#{@qrcode.name}" %>
</div>printDiv（）関数が数回出てきますが、その場合、すべてのバインディング要素と入力値が失われます。したがって、私の解決策は、「body_allin」と呼ばれるすべてのdivと、「body_print」と呼ばれる最初のdivの外側に別のdivを作成することです。
次に、この関数を呼び出します。
function printDiv(divName){
var printContents = document.getElementById(divName).innerHTML;
document.getElementById("body_print").innerHTML = printContents;
document.getElementById("body_allin").style.display = "none";
document.getElementById("body_print").style.display = "";
window.print();
document.getElementById("body_print").innerHTML = "";
document.getElementById("body_allin").style.display = "";
document.getElementById("body_print").style.display = "none";
}idが「printarea」のコンテンツを除く他のすべてのコンテンツを無効にする別のCSSスタイルを使用できます。
詳細な説明と例については、CSSの設計：印刷の開始を参照してください。
私はそれぞれボタン付きの複数の画像を持っていて、画像付きの各divを印刷するためにボタンをクリックする必要がありました。このソリューションは、ブラウザーでキャッシュを無効にしていて、Chromeで画像サイズが変わらない場合に機能します。
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
w = window.open();
w.document.write(printContents);
w.document.write('<scr' + 'ipt type="text/javascript">' + 'window.onload = function() { window.print(); window.close(); };' + '</sc' + 'ript>');
w.document.close(); // necessary for IE >= 10
w.focus(); // necessary for IE >= 10
return true;
}
<div id="printableArea">
<h1>Print me</h1>
</div>
<input type="button" onclick="printDiv('printableArea')" value="print a div!" />現在のページに影響を与えることなくもう1つアプローチし、印刷中もCSSを保持します。ここで、セレクターは、印刷する必要のある特定のdivセレクターである必要があります。
printWindow(selector, title) {
var divContents = $(selector).html();
var $cssLink = $('link');
var printWindow = window.open('', '', 'height=' + window.outerHeight * 0.6 + ', width=' + window.outerWidth * 0.6);
printWindow.document.write('<html><head><h2><b><title>' + title + '</title></b></h2>');
for(var i = 0; i<$cssLink.length; i++) {
printWindow.document.write($cssLink[i].outerHTML);
}
printWindow.document.write('</head><body >');
printWindow.document.write(divContents);
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.onload = function () {
printWindow.focus();
setTimeout( function () {
printWindow.print();
printWindow.close();
}, 100);
}
}ここで、外部のcssが適用されることを示すタイムアウトを示します。
提供されているソリューションの多くを試しましたが、どれも完璧に機能しませんでした。CSSまたはJavaScriptバインディングのいずれかが失われます。CSSもJavaScriptバインディングも失わない、完璧で簡単なソリューションを見つけました。
HTML：
<div id='printarea'>
<p>This is a sample text for printing purpose.</p>
<input type='button' id='btn' value='Print' onclick='printFunc();'>
</div>
<p>Do not print.</p>JavaScript：
function printFunc() {
var divToPrint = document.getElementById('printarea');
var htmlToPrint = '' +
'<style type="text/css">' +
'table th, table td {' +
'border:1px solid #000;' +
'padding;0.5em;' +
'}' +
'</style>';
htmlToPrint += divToPrint.outerHTML;
newWin = window.open("");
newWin.document.write("<h3 align='center'>Print Page</h3>");
newWin.document.write(htmlToPrint);
newWin.print();
newWin.close();
}私はこのパーティーに非常に遅れていますが、別のアプローチで売り込みたいと思います。PrintElementsと呼ばれる小さなJavaScriptモジュールを書いた Webページの一部を動的に印刷するためのました。
これは、選択されたノード要素を反復処理することで機能し、各ノードについて、BODY要素までDOMツリーを走査します。最初のレベル（印刷されるノードのレベル）を含む各レベルで、マーカークラス（pe-preserve-print）を現在のノードにアタッチします。次にpe-no-print、現在のノードのすべての兄弟に別のマーカークラス（）をアタッチしますが、pe-preserve-printそれらにクラスがない場合のみです。3番目の動作として、別のクラスを保存された祖先要素にアタッチしますpe-preserve-ancestor。
完全にシンプルな印刷専用のcssは、それぞれの要素を非表示にして表示します。このアプローチのいくつかの利点は、すべてのスタイルが保持されること、新しいウィンドウが開かないこと、多くのDOM要素を移動する必要がないこと、そして通常、元のドキュメントでは非侵襲的です。
これを使用できます：http : //vikku.info/codesnippets/javascript/print-div-content-print-only-the-content-of-an-html-element-and-not-the-whole-document/
またはvisibility:visible、visibility:hiddencssプロパティを一緒に使用します@media print{}
'display：none'は、ネストされたすべての 'display：block'を非表示にします。それは解決策ではありません。
私は解決策を見つけました。
@media print {
.print-area {
background-color: white;
height: 100%;
width: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index:1500;
visibility: visible;
}
@page{
size: portrait;
margin: 1cm;
}
/*IF print-area parent element is position:absolute*/
.ui-dialog,
.ui-dialog .ui-dialog-content{
position:unset !important;
visibility: hidden;
}
}@Kevin Floridaの回答に基づいて、コンテンツを上書きするために現在のページのスクリプトが無効になるのを回避する方法を作りました。「printScreen.php」（または.html）というファイルを使用しています。印刷するすべてをdiv "printSource"でラップします。そして、JavaScriptを使用して、前に作成した新しいウィンドウ（「printScreen.php」）を開き、上部のウィンドウの「printSource」のコンテンツを取得します。
これがコードです。
メインウィンドウ：
echo "<div id='printSource'>";
//everything you want to print here
echo "</div>";
//add button or link to print
echo "<button id='btnPrint'>Print</button>";
<script>
$("#btnPrint").click(function(){
printDiv("printSource");
});
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
w=window.open("printScreen.php", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=50,left=50,width=900,height=400");
}
</script>これは「printScreen.php」です-印刷するコンテンツを取得する他のファイル
<head>
// write everything about style/script here (.css, .js)
</head>
<body id='mainBody'></body>
</html>
<script>
//get everything you want to print from top window
src = window.opener.document.getElementById("printSource").innerHTML;
//paste to "mainBody"
$("#mainBody").html(src);
window.print();
window.close();
</script>