Question

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

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

当我使用overflow属性时，内容将无法正确打印，只有div的顶部会被拉伸并获得打印

<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的可见部分，但即使隐藏了元素的其余部分，它也不会覆盖整个页面（元素的其余部分没有崩溃）所以我想使用下面的代码重新定位它，但这也没有用。< / p>

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

}

请让我知道如何打印卷轴后面的内容的解决方案。 还想提一下这个Div在运行时会被填充，并且不包含静态值。

Answer 1

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

另一方面，

display: block确实从流中移除了元素，就好像它从来没有存在过，但是它不能被＆＃34;不被发现＆＃34;：一个元素在一个内部无法通过任何方式再次显示diplay: none。

最好的解决方案是在display: none（及其父级）以外的所有元素上明确使用printableDiv。您还应该删除/重置printableDiv（及其父项）上的所有定位样式。

这很大程度上取决于HTML的结构以及您最初定位printableDiv（及其父级）的方式。例如：

<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;
  }
}

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

1 个答案: