在新版本的chrome（108）之后，从我的应用程序打印时会添加一个额外的空白页。我怎样才能删除它？

Question

它在 Microsoft Edge 上运行良好。

以下内容在一页上有效。然而，项目的核心存在这个错误。

@media print {
    html, body {
        height: 100vh;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
}

打印某些页面时，不会在最后一页添加空白页。

Answer 1

尝试打印 Google 地图时会观察到相同的行为。 解决方法在这里。 https://support.google.com/chrome/thread/191619088?hl=en&msgid=192661374

Answer 2

尝试删除 DOM 中最后一个元素的额外

page-break-after

。

我改变了我的CSS

    .page {
        page-break-after: always;
    }

对此：

    .page:not(:last-child) {
        page-break-after: always;
    }

Answer 3

上次 chrome 更新后我遇到了同样的问题。

我有一个接一个的多页中断，它打印了 n-1 个空白页。 为此，我更改了代码以隐藏除第一个分页符之外的所有分页符。

旧代码

 div.pagebreak  {
        page-break-before: always !important;
        clear: both !important;
    }

新代码

div.pagebreak {
    display: none;
}

.single-page+div.pagebreak  {
    break-before: page !important;
    clear: both !important;
    display: block !important;
}

Answer 4

我已经更新了

page-break-after

，但没有成功。

为我解决这个问题的方法（2023，Chrome > v108）是设置@page 大小。它曾经是

auto

，我将其设置为页面的实际大小。

@page size 和 page-break-after 这两件事现在都已到位

文档： https://developer.mozilla.org/en-US/docs/Web/CSS/@page/size

Answer 5

简单的解决方案

您所需要的就是像这样使用contain：

@media print {
  body {
    contain: strict; // This will remove the blank page when printing.
  }
}

在这种情况下，

strict

就可以解决问题，如mozilla网络文档中所述：

strict

所有包含规则都应用于该元素。这相当于包含：尺寸布局绘画风格。

此外，该解决方案适用于所有浏览器（桌面和移动设备）：