只打印 <div id="printarea"></div>？

Question

如何打印指定的 div（无需手动禁用页面上的所有其他内容）？

我想避免一个新的预览对话框，所以用这个内容创建一个新窗口是没有用的。

该页面包含几个表格，其中一个包含我要打印的 div - 该表格的样式是 Web 的视觉样式，不应在打印中显示。

原文由 noesgard 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 1

这是一个通用的解决方案， 仅使用 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 移动到左上角，以便正确打印。

原文由 Bennett McElwee 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我有一个代码最少的更好的解决方案。

将您的可打印部分放入具有如下 id 的 div 中：

 <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”) 来执行。

没有绒毛，重量轻，很管用。

原文由 Kevin Florida 发布，翻译遵循 CC BY-SA 3.0 许可协议