Question

我想在按钮上使用<div>功能并在其上使用id属性，将带有onclick()的特定window.print()打印出来。

为此，我编写了一些@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>

Answer 2

如何设置具有固定位置的打印页面的高度和宽度

@media print {
 body{ margin: 0; padding: 0 }
 #printpage {
   min-height: 100vh; margin: 0; width: 100%; position: fixed; top: 0; left: 0 
 }
}

在对div内容进行定价时，占用了空间和空白页

2 个答案: