Question

我有一个包含多个div的页面。在此页面内，有一个带有特定类printThis的div。例如：

<html>
  <body>
    <div id="title">Hello</div>

    <div class="printThis">Help</div>
    <div class="printThis">Me</div>

    <div id="bottomPage">About me</div>
  </body>
</html>

现在，在我的@media印刷品中，我正在使用：

.printThis {
  display: none;
}

@media print {
  @page {
    size: A4 potrait;
    margin: 0;
  }

  html,
  body {
    margin: 0;
    padding: 0;
    height: 100vw;
    width: 100vw;
    background-color: #fff;
  }

  body *:not(.printThis) {
    display: none;
  }

  body div.printThis {
    display: block;
  }
}

.printThis类通常设置为display: none，但是在我的打印CSS中，它设置为display:block。问题是，当我打印时，我得到一张空白页。有没有一种方法可以打印并允许具有printThis类的每个div在自己的页面上打印？

非常感谢。

Answer 1

您的代码可以完美地实现打印功能，但是缺少的是分页符。更改：

body div.printThis {
    display: block;
}

收件人：

body div.printThis {
    display: block;
    page-break-after: always;
}

这将使每个<div class="printThis">thing</div>在自己的页面上显示。

打印除一个以外的所有元素的css选择器

1 个答案: