web-dev-qa-db-ja.com

Webページの特定の部分を印刷する

アプリケーションの特定の部分を印刷しようとしています。

アプリケーションには、ユーザーのリストがあり、姓と名が表示されます。ユーザーをクリックすると、それらの詳細情報を含むポップアップが表示されます。

クリックしたユーザーのポップアップのみを印刷するにはどうすればよいですか？ポップアップは次のようになります。

 <div id="user<?=$user->id;?>" class="popup">
      <div class="details">
           User details...
      </div>
      <a href="#print">Print</a>
 </div>

ただし、印刷ボタンはまだ機能していません。

javascripthtmlprinting
59
ItsGreg

単純なJavaScriptを使用して、ページから特定の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();
129
pmtamal

ユーザーが印刷できるようにしたい情報だけを含む新しいウィンドウを開く（または新しいページに移動する）必要があります。

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との間に空白があってはなりません

9
SReject

すべての複雑なJavaScriptの代わりに、シンプルなCSSで実際にこれを実現できます。通常の画面表示用と、のみの表示用に2つのCSSファイルを使用するだけです印刷したいコンテンツ。この後者のファイルでは、印刷したくないすべてのものを非表示にし、ポップアップのみを表示します。

両方のCSSファイルのmedia属性を定義することを忘れないでください：

<link rel="stylesheet" href="screen-css.css" media="all" />
<link rel="stylesheet" href="print-css.css" media="print" />
8
che-azeh

選択した要素の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 。

8
Alessandro Lettieri

CSSを使用して、印刷したくないコンテンツを非表示にします。ユーザーが印刷を選択すると、ページは「media = "print" CSS」を参照してページのレイアウトに関する指示を探します。

media = "print" 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>
5
Stnfordly

これは、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();
3
hailong

私はより良い選択肢を得ました、

最初に、クラス名またはIDで印刷可能セクションと印刷不可セクションを分離します

window.onafterprint = onAfterPrint;

function print(){
  //hide the nonPrintable div  
}

function onAfterPrint(){
  // Visible the nonPrintable div
}
<input type="button" onclick="print()" value="Print"/>

それで全部です

1
Arul Mani

ここで回答したように、 https://stackoverflow.com/a/1072151/42124 では、Javascriptを使用して特定のセクションを非表示のフレームに追加し、フォーカスして印刷できます。

0
David Cook

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

完全なコードとチュートリアルは、ここから入手できます- JavaScriptを使用してページ領域を印刷する方法 。

0
JoyGuru

Webページの一部を動的に印刷するための PrintElements という小さなJavaScriptモジュールを作成しました。

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

非常に単純な補足印刷専用cssは、それぞれの要素を非表示にして表示します。このアプローチのいくつかの利点は、すべてのスタイルが保持されること、新しいウィンドウが開かないこと、多くのDOM要素を移動する必要がないこと、および一般的に元のドキュメントに対して非侵襲的であることです。

デモ を参照するか、関連記事 詳細について を参照してください。

0
András Szepesházi