javascript - 如何使用window.print()打印具有水平和垂直滚动条的DIV的全部内容？

Question

我有一个包含水平和垂直滚动条的 div ，每当尝试使用 window.print() 命令方法打印 div 时，它只打印 div 的可见部分。 这是我尝试过的代码。

<style>
@media print {
 body * {
  visibility: hidden;
}
 .printableDiv * {   
  visibility: visible;
  overflow: visible;//  overflow: scroll; or overflow: auto;
}

当我使用溢出属性时，内容将无法正确打印，只有 div 的顶部部分会拉伸(stretch)并打印

<style>
@media print {
 body * {
  display: none;
}
 .printableDiv * {   
  display: block;
  overflow: visible;//  overflow: scroll; or overflow: auto;
}

没有打印任何内容

<style>
@media print {
 body * {
  visibility: hidden;
}
 .printableDiv * {   
  visibility: visible;
}

将打印 div 的可见部分，但即使隐藏了元素的其余部分，它也不会覆盖整个页面(元素的其余部分不会折叠)，所以我想使用下面的代码重新定位它，但这也不起作用。

  <style>
@media print {
 body * {
  visibility: hidden;
}
 .printableDiv * {   
  visibility: visible;
}
.printableDiv * {
position: absolute;
left: 0;
top: 0;

}

请告诉我如何打印滚动条后面的内容的解决方案。 还想提一下这个 Div 在运行时填充并且不包含静态值。

Answer 1

visibility: none仅停止显示/打印的元素，但不会从渲染流中删除，因此它仍然占据相同的空间。

display: block另一方面，确实从流中删除该元素，就好像它从未存在过一样，但它不能是“未继承的”:带有 diplay: none 的元素内的元素无法通过任何方式再次使其可见。

最好的解决方案是明确使用 display: none除 printableDiv 之外的所有元素(及其 parent )。您还应该删除/重置 printableDiv 上的所有定位样式(及其 parent )。

这在很大程度上取决于 HTML 的结构以及您最初的定位方式 printableDiv (及其 parent )。示例:

<div id="head">...</div>
<div id="content">
  <div id="something">
  <div class="printableDiv">...</div>
  <div id="something_else">
</div>

@media print {
  #head, #something, #something_else {
    display: none;
  }
  #content, .printableDiv {
    position: static;
    margin: 0;
  }
}