javascript - 打印 div 内容时占用空间和空白页

Question

我想打印一个特定的 <div>用 id使用 onclick()按钮上的功能和window.print()上的属性(property)。

为此，我写了一些 @media print CSS。

它打印出 <div>内容，但它需要很大的间距，导致空白页。这是我的代码:

@media print {
  body * {
    visibility: hidden;
  }
  #printpage,
  #printpage * {
    visibility: visible;
  }
  #printpage {
    overflow: visible;
    position: absolute !important;
    left: 0;
    top: 0;
  }
}

<button type="submit" class="btn btn-primary" onclick="window.print();">Print</button>

<div id="printpage"></div>

Answer 1

visibility: hidden; 不会阻止该元素占用页面空间，它有效地使其不可见但仍占用空间。

您可能想使用 display: none; 这也将删除元素占用的空间。

.container {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: #888;
  vertical-align: top;
}

.container div {
  height: 20px;
}

.vis {
  visibility: hidden;
}

.dis {
  display: none;
}

<div class="container">
  <div class="vis"></div>
  Visibility
</div>
<div class="container">
  <div class="dis"></div>
  Display
</div>