打印预览中的第一页后模态内容被切断

Question

我在打印模块内容时遇到问题，所有浏览器都会发生这种情况。 当我打印模态内容时，它只预览第一页，第一页之后的任何内容都会被切断。 我已经尝试在 Chrome 打印模拟器中进行调试，但仍然无法找到解决方案。

在某些时候，我向打印模拟器添加了一个滚动条，我可以向下滚动以查看所有内容，但是当我打印预览时，它显示滚动条并且仍然在第一页之后切断任何内容。 我不知道为什么打印预览与模拟器的表现如此不同。

该项目处于反应状态，不使用任何第三方库（如 bootstrap modal）的普通模态。

印刷媒体查询：

@media print {
  body, html {
    height: 100%;
    overflow: visible !important;
  }

  .account-header {
    display: none;
  }

  .list-wrap {
    height: 100%;
    // overflow: scroll !important;
  }
  .account-content {
    margin: 0;
    padding: 0;
    border: 2px solid red;
    position: absolute !important;
    overflow: visible !important;
    visibility: visible !important;
    display:block;
  }

  .account {
    background-color: none !important;
    display: inline-block;
    font-size: 12px;
    border: 1px solid blue;
  }
}

注意：.list-wrap 是一个应用于 .account-content 的父容器的类。 使用 overflow: scroll 样式会向打印模拟器添加一个滚动条，我将能够在那里看到所有的模式内容。 但在实际打印预览中，它仍然只显示第一页。

Answer 1

打印时的问题是您必须设置页面大小属性。 为您提供所描述问题的规则是与height相关的规则。

根据您希望如何打印页面以及您希望如何处理分页符，您必须按照以下文档中的说明进行操作：

https://www.w3.org/TR/WD-css2/page.html

您应该检查的部分至少是：

• https://www.w3.org/TR/WD-css2/page.html#page-size-prop
• https://www.w3.org/TR/WD-css2/page.html#page-breaks

可以帮助您的另一篇文章是这篇文章：

https://www.jegsworks.com/lessons/web-2/html/step-mediaprint.htm

如果你想确保与浏览器有更广泛的兼容性，这个 GitHub 存储库可以帮助你：

https://github.com/cognitom/paper-css