打印内容大于1页的Bootstrap Modal页面会导致Google Chrome中断

Question

试图让印刷适用于Modals.

在最新的谷歌浏览器中,使用最新的angular-ui-bootstrap 0.14.2,我们在列表或表格等大型内容溢出到下一页时遇到问题.

我已经完成了隐藏背景对象的必要更改:将以下样式添加到模式页面中:

@media print {
      body * {
        visibility: hidden;
      }
      #print-content * {
        visibility: visible;
        overflow: visible;
      }
      #mainPage * {
        display: none;
      }
      .modal {
        position: absolute;
        left: 0;
        top: 0;
        margin: 0;
        padding: 0;
        min-height: 550px;
      }
      li {
        page-break-after: auto;
      }
    }

任何人都有快速解决方案吗？

Plunker:http://plnkr.co/edit/TV0ttEAw4LWJ6sGLjSTR？p = preview

您可以测试不同模态的打印预览和打印按钮.打印预览适用于当前页面,但不适用于模态.=(

Answer 1

我发现CSS中的可见性和溢出属性存在问题.

@media print {
  .modal {
    visibility: visible;
    /**Remove scrollbar for printing.**/
    overflow: visible !important;
  }
  .modal-dialog {
    visibility: visible !important;
    /**Remove scrollbar for printing.**/
    overflow: visible !important;
  }
}

转到更新的plunkler:http://plnkr.co/edit/TV0ttEAw4LWJ6sGLjSTR？p = preview 查看包含50个项目的大型模态,然后单击打印,您将内容很好地传递到第二页.NICE!

打印Modal溢出问题:

固定溢出后打印模态问题: