打印<div id=“printarea”></div>？

javascript css dhtml printing

2022-08-29 23:05:16

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

我想避免使用新的预览对话框，因此使用此内容创建新窗口没有用处。

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

答案 1

这是一个通用的解决方案，仅使用CSS，我已经验证了它的工作原理。

@media print {
  body * {
    visibility: hidden;
  }
  #section-to-print, #section-to-print * {
    visibility: visible;
  }
  #section-to-print {
    position: absolute;
    left: 0;
    top: 0;
  }
}

替代方法不是那么好。使用是棘手的，因为如果任何元素都有，那么它的后代也不会显示。要使用它，您必须更改页面的结构。displaydisplay:none

使用效果更好，因为您可以为后代启用可见性。不可见的元素仍然会影响布局，所以我移动到左上角，以便正确打印。visibilitysection-to-print

答案 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 属性添加到样式表链接（media=“print”）来执行操作。

没有绒毛，轻巧，它只是工作。