如何在单击按钮时打印 HTML 内容，而不是页面？ [复制]
Posted
技术标签:
【中文标题】如何在单击按钮时打印 HTML 内容，而不是页面？ [复制]【英文标题】：How to print HTML content on click of a button, but not the page? [duplicate] 【发布时间】：2013-05-29 11:34:51 【问题描述】：当用户单击按钮时，我想打印一些 html 内容。一旦用户单击该按钮，浏览器的打印对话框将打开，但不会打印网页。相反，它将打印页面上未显示的其他一些 HTML 内容。
在问这个问题时，我想到的解决方案很少。但我不确定这些是好主意还是可以做得更好。这些解决方案之一是：
我可以将此 HTML 内容保存在一个 div 中，并使其 display: 打印，但 display: none 显示。网页上的所有其他元素都可以设为display: none 用于打印，display: 用于屏幕。然后调用打印。
有更好的主意吗？
【问题讨论】：
你能告诉我们你的代码吗？ （进一步考虑到这里评分最高的答案是使用来自one of the answers to the other question的代码几乎逐字） 这个库可以帮助打印页面中选定的 html 元素：printjs.crabbly.com 【参考方案1】：根据this SO link你可以打印一个特定的div
w=window.open();
w.document.write(document.getElementsByClassName('report_left_inner')[0].innerHTML);
w.print();
w.close();
【讨论】：
此解决方案需要问题中未提及（或标记）的 JQuery。您应该在答案中指定此依赖项。 用 vanilla js 替换$('.report_left_inner').html() 将使这成为页面上简单和健壮性的最佳答案
w.document.write(document.getElementsByClassName('report_left_inner')[0].innerHTML);
这太棒了。不过要注意一点：您需要单独检查和注入您的样式规则，否则它将退回到纯 HTML。为此，我个人在此处给出的document.write() 之前做了document.write('<style>'+ ... + '</style>');。
这很有趣，但是当我从 Angular 组件尝试它时，我没有将 CSS 应用到新窗口。此外，图像没有时间在 write 调用和 print 调用之间加载，因此它们直到打印对话框完成后才会出现。【参考方案2】：
这里是纯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>【讨论】：
我喜欢你不需要打开一个新窗口和所有的废话。 @Robusto 一方面同意，但我不喜欢保存页面（无需打印）的方式不太好，更不用说何时需要处理分页。从这个意义上说，准备要“打印”的页面是模棱两可的。 媒体查询的伟大使用（Y）【参考方案3】：以下代码可能对您有所帮助：
<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>
【讨论】：
哇！这是我在 *** 中看到的最直接的答案。【参考方案4】：@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>我遇到了另一个优雅的解决方案：
将您的可打印部分放置在具有如下 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;
来源：SO Answer
【讨论】：
这会对事件监听器造成什么影响？ 这可能会破坏您加载后由 js 添加的动画和事件。谨慎使用。 这似乎过于复杂了。 @media print 是一个更清洁的解决方案（见下面 2ne 的帖子）。 我的 dom 事件处理程序在重新附加原始内容后消失了。 打印后会影响原页面。【参考方案5】：如果你添加和删除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');
【讨论】：
嗨阿莱霍。聪明的解决方案，但它在 IE 中不起作用。你能帮我解决这个问题吗：***.com/questions/49410902THaNKS！【参考方案6】：我想看看这个
例如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>
【讨论】：
在 IE 11 中不工作以上是关于如何在单击按钮时打印 HTML 内容，而不是页面？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章