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

Question

我想在按钮和属性上打印<div>具有id使用功能的特定内容。onclick()window.print()

为此，我写了一些@media printCSS。

它打印<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>

标签： javascripthtmlcss

Answer 1

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

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