如何打印 HTML 内容的按钮点击，但不页面？

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

在问这个问题的时候，我脑子里几乎没有什么解决办法。但我不确定这些是好主意还是可以做得更好。其中一个解决办法是: 我可以将这些 HTML 内容保存在 div 中，并使其 display:打印，而 display: none显示。网页上的所有其他元素都可以做成 display: none打印和 display:屏幕。然后打电话印刷。

有更好的主意吗？

752607 次浏览
小开

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

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

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

小开

以下代码可能对你有帮助:

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

@media print {
.noPrint{
display:none;
}
}
h1{
color:#f6f6;
}
<h1>
print me
</h1>
<h1 class="noPrint">
no print
</h1>
<button onclick="window.print();" class="noPrint">
Print Me
</button>

我发现了另一个优雅的解决方案:

将可打印的部分放在一个 div 中，ID 如下:

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

来源: 回答我

小开

如果你添加和删除 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“ site-Container”包含所有站点，因此可以调用如下函数:

printDiv('.someDiv');
小开

我想看看这个

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

提交答案