单击按钮时如何打印 HTML 内容，而不是页面？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16894683/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to print HTML content on click of a button, but not the page?
提问by Debiprasad
I want to print some HTML content, when the user clicks on a button. Once the user clicks on that button, the print dialog of the browser will open, but it will not print the webpage. Instead, it will print the some other HTML content which is not displayed on the page.
当用户单击按钮时，我想打印一些 HTML 内容。一旦用户点击该按钮，浏览器的打印对话框将打开，但不会打印网页。相反，它会打印一些未显示在页面上的其他 HTML 内容。
While asking this question, there are few solutions coming into my mind. But I am not sure whether those are good ideas or something better can be done. One of those solutions are:
I can keep this HTML content in a div and make it display:to print, but display: noneto screen. All other elements on the webpage can be made to display: nonefor print and display:for the screen. And then call to print.
在问这个问题时，我想到的解决方案很少。但我不确定这些是好主意还是可以做一些更好的事情。其中一种解决方案是：我可以将这个 HTML 内容保存在一个 div 中并使其display:打印，但display: none要进行屏幕显示。网页上的所有其他元素都可以display: none用于打印和display:屏幕。然后调用打印。
Any better idea?
有什么更好的主意吗？
回答by asprin
I came across another elegant solution for this:
我遇到了另一个优雅的解决方案：
Place your printable part inside a div with an id like this:
将您的可打印部分放在一个 div 中，其 id 如下所示：
<div id="printableArea">
<h1>Print me</h1>
</div>
<input type="button" onclick="printDiv('printableArea')" value="print a div!" />
Now let's create a really simple javascript:
现在让我们创建一个非常简单的 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 Answer
来源：所以答案
回答by 2ne
Here is a pure css version
这是一个纯 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>回答by Jaay
According to this SO linkyou can print a specific div with
根据此 SO 链接，您可以打印特定的 div
w=window.open();
w.document.write(document.getElementsByClassName('report_left_inner')[0].innerH??TML);
w.print();
w.close();
回答by Panchal Deep
I Want See This
我想看这个
Example 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>
回答by Butani Vijay
Below Code May Be Help You :
下面的代码可能会帮助你：
<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>
回答by Alejo JM
If you add and remove the innerHTML, all javascript, css and more will be loaded twice, and the events will fire twice (happened to me), is better hide content, using jQuery and css like this:
如果添加和删除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:''});
}
The div "site-container" contain all site, so you can call the function like:
div "site-container" 包含所有站点，因此您可以调用如下函数：
printDiv('.someDiv');
