只打印<div id=“printrea”></div>？

3回答

波斯汪

下面是一个通用的解决方案，使用仅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

Cats萌萌

我有一个更好的解决方案，用最少的代码。将可打印的部分放入具有如下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属性添加到样式表链接(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中移动一些东西.