如何打印指定的 div（无需手动禁用页面上的所有其他内容）？
我想避免一个新的预览对话框，所以用这个内容创建一个新窗口是没有用的。
该页面包含几个表格，其中一个包含我要打印的 div - 该表格的样式为 Web 视觉样式，不应在打印中显示。
只打印 <div id="printarea"></div> 吗？
IT技术
javascript
css
printing
dhtml
2021-02-02 09:56:03
6个回答
这是一个通用的解决方案，只使用CSS，我已经验证它可以工作。
@media print {
body * {
visibility: hidden;
}
#section-to-print, #section-to-print * {
visibility: visible;
}
#section-to-print {
position: absolute;
left: 0;
top: 0;
}
}
替代方法不是那么好。使用display很棘手，因为如果有任何元素，display:none那么它的后代也不会显示。要使用它，您必须更改页面的结构。
使用visibility效果更好，因为您可以为后代打开可见性。不可见的元素仍然会影响布局，所以我移到section-to-print左上角以便正确打印。
我有一个更好的解决方案，代码最少。
将您的可打印部分放在一个 div 中，其 id 如下所示：
<div id="printableArea">
<h1>Print me</h1>
</div>
<input type="button" onclick="printDiv('printableArea')" value="print a div!" />
然后添加一个类似 onclick 的事件（如上所示），并像我上面那样传递 div 的 id。
现在让我们创建一个非常简单的 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;
}
注意到这有多简单了吗？没有弹出窗口，没有新窗口，没有疯狂的样式，没有像 jquery 这样的 JS 库。真正复杂的解决方案（答案并不复杂，也不是我所指的）的问题在于它永远不会在所有浏览器上进行翻译，永远！如果要使样式不同，请通过将媒体属性添加到样式表链接 (media="print") 来执行已检查答案中所示的操作。
没有绒毛，重量轻，它只是工作。
到目前为止，所有答案都有很大的缺陷——它们要么涉及添加class="noprint"所有内容，要么会display在#printable.
我认为最好的解决方案是围绕不可打印的东西创建一个包装器：
<head>
<style type="text/css">
#printable { display: none; }
@media print
{
#non-printable { display: none; }
#printable { display: block; }
}
</style>
</head>
<body>
<div id="non-printable">
Your normal page contents
</div>
<div id="printable">
Printer version
</div>
</body>
当然这并不完美，因为它涉及在 HTML 中移动一些东西......
使用 jQuery 就这么简单：
w=window.open();
w.document.write($('.report_left_inner').html());
w.print();
w.close();