web-dev-qa-db-ja.com

<div id = "printarea"> </div>のみを印刷しますか？

指示されたdivを印刷するにはどうすればよいですか（ページ上の他のすべてのコンテンツを手動で無効にすることなく）。

私は新しいプレビューダイアログを避けたいので、この内容で新しいウィンドウを作成することは役に立ちません。

ページにはいくつかのテーブルがあり、そのうちの1つに印刷したいdivが含まれています。テーブルはWeb用のビジュアルスタイルでスタイルされているため、印刷では表示されません。

javascriptcssprintingdhtml
382
noesgard

これは 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を左上に動かしてそれが正しく印刷されるようにします。

671
Bennett McElwee

私は最小限のコードでより良い解決策を得ました。

このような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属性を追加して、チェックされた答えのようにしてください（media = "print"）。

毛羽立ちはありません、軽量、それだけで動作します。

218
Kevin Florida

これまでのすべての答えにはかなり欠陥があります - それらはすべてにclass="noprint"を追加することを含むか、または#printable内のdisplayをめちゃくちゃにするでしょう。

私は最善の解決策は印刷不可能なものの周りにラッパーを作成することであろうと思います：

<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の中で物事を少し動かす必要があるので、これは完璧ではありません...

117
Greg

JQueryでは、これはとても簡単です。

w=window.open();
w.document.write($('.report_left_inner').html());
w.print();
w.close();
105
romaninsh

印刷スタイルシート を使用して、CSSを使用して印刷したいコンテンツを配置してもらえますか。 この記事を読んでください より多くのポインタについて。

21
Paul Dixon

これはうまくいきます：

<style type="text/css">
@media print
{
body * { visibility: hidden; }
#printcontent * { visibility: visible; }
#printcontent { position: absolute; top: 40px; left: 30px; }
}
</style>

これは「可視性」でのみ機能することに注意してください。 「表示」はしません。 FF3でテスト済み。

19
Christian Maioli M.

私は全体としてこれらの答えのどれも本当に好きではなかった。クラス（printableAreaなど）があり、それをbodyの直接の子として持っている場合は、印刷CSSで次のようなことができます。

body > *:not(.printableArea) {
    display: none;
}

//Not needed if already showing
body > .printableArea {
    display: block;
}

可視性を使用すると、スペーシングの問題と空白ページが多数発生する可能性があります。これは、可視性が要素のスペースを維持し、それを非表示にするだけで、ディスプレイがそれを削除して他の要素がそのスペースを占有できるようにするためです。

この解決策がうまくいく理由は、あなたがすべての要素をつかむのではなく、ただ身近な子供たちだけを隠しているからです。 display cssを使用した以下の他の解決策では、すべての要素を非表示にして、printableAreaコンテンツ内のすべての要素に影響を与えます。

ユーザーがクリックする印刷ボタンが必要で、標準的なブラウザの印刷ボタンは同じ効果がないため、JavaScriptは推奨しません。あなたが本当にそれをする必要があるならば、私がすることはbodyの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" />
12
fanfavorite

  1. あなたがID printMeを表示したい要素をすべて指定してください。

  2. このスクリプトをheadタグに含めます。

    <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>

  3. 関数を呼び出す

    <a href="javascript:void(processPrint());">Print</a>
8
Sandro

ええと...印刷にはスタイルシートの種類を使用します。

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

print.css：

div { display: none; }
#yourdiv { display: block; }
6
Andreas Niedermair

ステップ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>
6
Hardik Thaker
<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>
6
Singh

私の場合は、ページ内に画像を印刷する必要がありました。私が投票した解決策を使用したとき、私は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>
2
Raphael Monteiro

JavaScriptを使用してコンテンツを取得し、代わりに印刷できるウィンドウを作成しました。

2
noesgard

サンドロの方法はうまくいきます。

私はそれを微調整して、特にタブ付きページやテキストの拡大に​​使用するために、複数のprintMeリンクを許可できるようにしました。

function processPrint(printMe){ < - ここで変数を呼び出す

var printReadyElem = document.getElementById(printMe); < - 変数を要求するためにprintMeを囲む引用符を削除しました

<a href="javascript:void(processPrint('divID'));">Print</a> < - printMe変数をdiv IDに変換する関数に、印刷するdiv IDを渡します。一重引用符が必要です

2
westy

CSS 3では、次のものを使うことができます。

body *:not(#printarea) {
    display: none;
}
2
Gumbo

フロリダ州ケビン同じクラスに複数のdivがある場合は、次のように使用できます。

 <div style="display:none">
   <div id="modal-2" class="printableArea">
     <input type="button" class="printdiv-btn" value="print a div!" />
   </div>
 </div>

私はカラーボックス内部コンテンツタイプを使用していました

$(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);
});
2
Stefan

printDiv（divId） ：任意のページに任意のdivを印刷するための一般化された解決策。

私は同様の問題を抱えていましたが、（a）ページ全体を印刷できるようにすること、または（b）いくつかの特定の領域のいずれかを印刷できることを望みました。私の解決策は、上記の多くのおかげで、印刷するdivオブジェクトを指定することができます。

この解決法の鍵は、要求されたdiv（およびその内容）が印刷されるように、印刷媒体スタイルシートに適切な規則を追加することです。

まず、必要なprint cssを作成してすべてを抑制します（ただし、印刷したい要素を許可するための特定の規則はありません）。

<style type="text/css" media="print">
   body {visibility:hidden; }
   .noprintarea {visibility:hidden; display:none}
   .noprintcontent { visibility:hidden; }
   .print { visibility:visible; display:block; }
</style>

新しいクラス規則を追加したことに注意してください。

  • noprintarea を使用すると、コンテンツとブロックの両方のdiv内の要素の印刷を抑制できます。
  • noprintcontent を使用すると、div内の要素の印刷を抑制できます。コンテンツは抑制されますが、割り当てられた領域は空のままになります。
  • print を使用すると、印刷されたバージョンでは表示されるが画面のページには表示されない項目を使用できます。これらは通常、画面スタイルとして "display：none"を持ちます。

次に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）を適切なシート番号に変更してください。

2
DrDave

私は提供された解決策の多くを試してみました。それらのどれも完全にうまくいきませんでした。それらは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();
    }
1
BibanCS

私はこのパーティーに非常に遅れています、しかし私はさらに別のアプローチで売り込みたいです。 Webページの一部を動的に印刷するための PrintElements という小さなJavaScriptモジュールを書きました。

これは選択されたノード要素を反復処理することによって機能し、ノードごとにBODY要素までDOMツリーをたどります。最初のレベル（印刷されるノードのレベル）を含む各レベルで、マーカークラス（pe-preserve-print）を現在のノードに割り当てます。次に、現在のノードのすべての兄弟に別のマーカークラス（pe-no-print）を追加します。ただし、それらにpe-preserve-printクラスがない場合に限ります。 3番目の行為として、保存されている祖先要素pe-preserve-ancestorに別のクラスを追加します。

単純で補足的な印刷専用のcssは、それぞれの要素を隠したり表示したりします。このアプローチのいくつかの利点は、すべてのスタイルが保持され、新しいウィンドウが開かず、多くのDOM要素を移動する必要がなく、一般的に元の文書を侵害しないことです。

demo を参照するか、関連記事 詳細はこちら を読んでください。

1
András Szepesházi

現在のページに影響を与えずにもう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がそれに適用されることを示すタイムアウトをいくつか示しました。

1
Mukesh Kumar Suman

特別なスタイルシートを使って印刷する

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

次に、印刷したくないコンテンツのすべてのタグに、クラス「noprint」を追加します。

CSSで使う

.noprint {
  display: none;
}
1
Xn0vv3r

あなたはid "printarea"を持つものを除いて他のすべてのコンテンツを無効にする別のCSSスタイルを使うことができます。

さらなる説明と例については CSSデザイン：印刷へ行く を参照してください。

1
Kosi2801

PrintDiv（）関数が数回出てきましたが、その場合は、バインディング要素と入力値をすべて失います。だから、私の解決策は "body_allin"と呼ばれるすべてのものと "body_print"と呼ばれる最初のものの外側に別のものの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";

}
1
pmrotule

私はそれぞれボタン付きの複数の画像を持っていて、画像付きの各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
live-love

スペースの空の高さに合わせるための最良のCSS：

@media print {
  body * {
    visibility: hidden;
    height:0;
  }
  #section-to-print, #section-to-print * {
    visibility: visible;
    height:auto;
  }
  #section-to-print {
    position: absolute;
    left: 0;
    top: 0;
  }
}
1
TRI ÂN

あなたはこれを使うことができます： http://vikku.info/codesnippets/javascript/print-div-content-print-only-the-content-of-an-html-element-and-not-the-whole-document/

またはvisibility:visibleおよびvisibility:hidden cssプロパティを@media print{}と一緒に使用する

'display：none'はネストした 'display：block'をすべて隠します。それは解決策ではありません。

0
0xC0DEGURU