angularjs – 打印内容大于1页的Bootstrap Modal页面会导致Googl

发布时间：2020-12-17 07:09:21 所属栏目：安全来源：网络整理

导读：试图让印刷适用于Modals. 在最新的谷歌浏览器中,使用最新的angular-ui-bootstrap 0.14.2,我们在列表或表格等大型内容溢出到下一页时遇到问题. 我已经做了必要的更改来隐藏背景对象：将以下样式添加到模式页面中： @media print { body * { visibility: hidd

试图让印刷适用于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

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

解决方法

我发现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溢出问题：

enter image description here

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

enter image description here

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!