javascript - 印刷
それだけ？

Question

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

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

このページにはいくつかのテーブルが含まれており、そのうちの1つには印刷したいdivが含まれています。テーブルはWebの視覚的なスタイルでスタイル設定されており、印刷では表示されません。

score 929 · Accepted Answer

これは、 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左上に移動して適切に印刷します。

score 279 · Accepted Answer

最小限のコードでより良い解決策があります。

次のような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"）に追加してください。

毛羽立ちがなく、軽量で、機能します。

score 128 · Accepted Answer

これまでのすべての答えはかなり欠陥があります-それらはすべてに追加することを含むか、または内で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内で物事を少し動かす必要があるため、完璧ではありません...

score 116 · Accepted Answer

jQueryを使用すると、次のように簡単になります。

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

score 23 · Accepted Answer

印刷スタイルシートを使用し、CSSを使用して印刷したいコンテンツを配置できますか？その他のポインタについては、この記事をお読みください。

score 17 · Accepted Answer

全体として、これらの回答はどれもあまり好きではありませんでした。クラス (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;
}

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

このソリューションが機能する理由は、すべての要素を取得するのではなく、 body の直接の子だけを取得して非表示にするためです。以下の 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" />

score 10 · Accepted Answer

印刷したい要素に id を与えますprintMe。

次のスクリプトを 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>

関数を呼び出す

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

score 7 · Accepted Answer

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

score 6 · Accepted Answer

うーん...印刷にスタイルシートのタイプを使用してください...例：

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

print.css：

div { display: none; }
#yourdiv { display: block; }

score 3 · Accepted Answer

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>

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

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) を適切なシート番号に変更します。

score 2 · Accepted Answer

2

CSS 3では、次を使用できます。

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

于 2009-01-22T12:14:31.507 に答える

score 2 · Accepted Answer

私の場合、ページ内に画像を印刷する必要がありました。投票したソリューションを使用すると、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>

score 2 · Accepted Answer

@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);
});

score 2 · Accepted Answer

Sandro の方法はうまく機能します。

複数の printMe リンクを許可するように微調整しました。特に、タブ付きページやテキストの展開で使用できるようにしました。

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

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

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

score 2 · Accepted Answer

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

score 1 · Accepted Answer

IDが「printarea」のコンテンツを除く他のすべてのコンテンツを無効にする別のCSSスタイルを使用できます。

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

score 1 · Accepted Answer

printDiv() 関数は数回出てきましたが、その場合、すべてのバインド要素と入力値が失われます。したがって、私の解決策は、「body_allin」と呼ばれるすべての div と、「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";

}

score 1 · Accepted Answer

この div のみを印刷する場合は、次の命令を使用する必要があります。

@media print{
    *{display:none;}
    #mydiv{display:block;}
}

score 0 · Accepted Answer

印刷には特別なスタイルシートを使用する

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

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

CSSでの使用

.noprint {
  display: none;
}

score 0 · Accepted Answer

これを使用できます: http://vikku.info/codesnippets/javascript/print-div-content-print-only-the-content-of-an-html-element-and-not-the-whole-document/

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

「display:none」は、ネストされたすべての「display:block」を非表示にします。それは解決策ではありません。

javascript - 印刷それだけ？

33 に答える 33

Related

Reference

javascript - 印刷
それだけ？