打印预览第一页后模态内容被截断

Posted 2023-03-06

【中文标题】打印预览第一页后模态内容被截断

【英文标题】：Modal content gets cut off after first page in print preview

【发布时间】：2017-08-09 18:18:59

【问题描述】：

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

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

该项目处于反应、普通模式，不使用任何第三方库，如引导模式。

印刷媒体查询：

@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 的父容器的类。使用溢出：滚动样式会在打印模拟器中添加一个滚动条，我可以在那里看到所有的模态内容。但在实际打印预览中，仍然只显示第一页。

【问题讨论】：

如果你能提供任何演示链接会很有帮助，例如：codepen 链接

【参考方案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

【讨论】：

这里没有任何帮助（我没有尝试 paper-css）。我已经设置了分页符，我已经设置了页面的大小。我已经用 !important 设置了可见性。我所做的一切只打印符合定义的页面大小的模式的顶部，并准确地重复完整内容所代表的页面数。问题是模态。它们只是对打印机不友好，产品负责人坚持使用它们并打印它们。我要做的是设置一整套 ​​CSS 文件，以让 PO 满意的方式设置模态 HTML 样式。