如何点击button打印HTML内容,但不是页面?

我想打印一些HTML内容,当用户点击一个button。 一旦用户点击该button,浏览器的打印对话框将打开,但不会打印网页。 相反,它会打印一些其他HTML页面上没有显示的内容。

在问这个问题的时候,我脑海中没有什么解决方法。 但是我不确定这些想法是好还是可以做的更好。 其中一个解决scheme是:我可以保持这个HTML内容在一个div并使其display:打印,但display: none屏幕。 网页上的所有其他元素都可以display: none用于打印和display:用于屏幕。 然后打电话打印。

更好的主意?

我遇到了另一个优雅的解决scheme:

把你的可打印部分放在一个div中,像这样的一个id:

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

现在我们来创build一个非常简单的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答案

这是一个纯粹的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> 

根据这个链接,你可以打印一个特定的div

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

我想看到这个

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

以下代码可能会帮助您:

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

如果你添加和删除innerHTML,所有的JavaScript,CSS和更多将被加载两次,事件将会触发两次(发生在我身上),更好地隐藏内容,使用jQuery和CSS是这样的:

 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“网站容器”包含所有的网站,所以你可以调用的function,如:

 printDiv('.someDiv');