web-dev-qa-db-ja.com

ボタンをクリックするだけでHTMLページを印刷するにはどうすればよいですか。

ユーザーがボタンをクリックしたときに、HTMLコンテンツを印刷したいのですが。ユーザーがそのボタンをクリックすると、ブラウザの印刷ダイアログが開きますが、Webページは印刷されません。代わりに、ページに表示されていない他のHTMLコンテンツを印刷します。

この質問をしながら、私の頭に浮かぶ解決策はほとんどありません。しかし、それらが良いアイデアなのか、それとももっと良いことができるのか私にはわかりません。これらの解決策の1つは、次のとおりです。このHTMLコンテンツをdivに保存して、印刷するにはdisplay:に、画面にはdisplay: noneにすることができます。 Webページ上の他のすべての要素は、印刷用にdisplay: none、画面用にdisplay:にすることができます。そして、印刷を依頼してください。

もっと良いアイデアはありますか？

javascripthtmlcssprinting
89
Debiprasad

私はこれに対するもう一つの優雅な解決策に出会いました：

このようなIDを持つdiv内に印刷可能部分を配置します。

<div id="printableArea">
      <h1>Print me</h1>
</div>

<input type="button" onclick="printDiv('printableArea')" value="print a div!" />

それでは、本当にシンプルな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;
}

SOURCE： SO回答

131
asprin

これは純粋なCSSバージョンです。

.example-print {
    display: none;
}
@media print {
   .example-screen {
       display: none;
    }
    .example-print {
       display: block;
    }
}
<div class="example-screen">You only see me in the browser</div>

<div class="example-print">You only see me in the print</div>
80
2ne

によると このSO link で特定のdivを表示できます。

w=window.open();
w.document.write(document.getElementsByClassName('report_left_inner')[0].innerH‌​TML);
w.print();
w.close();
56
Jaay

見て欲しい

例 http://jsfiddle.net/35vAN/

    <html>
<head>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js" > </script> 
<script type="text/javascript">

    function PrintElem(elem)
    {
        Popup($(elem).html());
    }

    function Popup(data) 
    {
        var mywindow = window.open('', 'my div', 'height=400,width=600');
        mywindow.document.write('<html><head><title>my div</title>');
        /*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
        mywindow.document.write('</head><body >');
        mywindow.document.write(data);
        mywindow.document.write('</body></html>');

        mywindow.print();
        mywindow.close();

        return true;
    }

</script>
</head>
<body>

<div id="mydiv">
    This will be printed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a quam at nibh adipiscing interdum. Nulla vitae accumsan ante. 
</div>

<div>
    This will not be printed.
</div>

<div id="anotherdiv">
    Nor will this.
</div>

<input type="button" value="Print Div" onclick="PrintElem('#mydiv')" />

</body>

</html>
10
Panchal Deep

以下のコードが役に立ちます。

<html>
<head>
<script>
function printPage(id)
{
   var html="<html>";
   html+= document.getElementById(id).innerHTML;

   html+="</html>";

   var printWin = window.open('','','left=0,top=0,width=1,height=1,toolbar=0,scrollbars=0,status  =0');
   printWin.document.write(html);
   printWin.document.close();
   printWin.focus();
   printWin.print();
   printWin.close();
}
</script>
</head>
<body>
<div id="block1">
<table border="1" >
</tr>
<th colspan="3">Block 1</th>
</tr>
<tr>
<th>1</th><th>XYZ</th><th>athock</th>
</tr>
</table>

</div>

<div id="block2">
    This is Block 2 content
</div>

<input type="button" value="Print Block 1" onclick="printPage('block1');"></input>
<input type="button" value="Print Block 2" onclick="printPage('block2');"></input>
</body>
</html>
7
Butani Vijay

InnerHTMLを追加したり削除したりすると、すべてのjavascript、cssなどが2回ロードされ、イベントが2回発生します。

function printDiv(selector) {
    $('body .site-container').css({display:'none'});
    var content = $(selector).clone();
    $('body .site-container').before(content);
    window.print();
    $(selector).first().remove();
    $('body .site-container').css({display:''});
}

Div "site-container"にはすべてのサイトが含まれているので、次のように関数を呼び出すことができます。

printDiv('.someDiv');
2
Alejo JM