angularjs - 打印内容超过 1 页的 Bootstrap Modal 页面会导致 Google Chrome 被截断

Question

尝试让打印适用于模态框。

在最新的 Google Chrome 中并使用最新的 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;
      }
    }

有人有快速解决办法吗？

笨蛋: 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 个项目的大模态，然后单击打印，内容就会很好地流到第二页。很好!

打印模态时出现溢出问题:

修复溢出问题后打印模态框: