打印内容大于 1 页的 Bootstrap Modal 页面会导致在 Google Chrome 中被截断答案

【问题标题】：Printing a Bootstrap Modal page with contents larger than 1 page results in cut off in Google Chrome打印内容大于 1 页的 Bootstrap Modal 页面会导致在 Google Chrome 中被截断
【发布时间】：2021-05-20 21:40:33
【问题描述】：

尝试让 Modals 打印工作。

在最新的 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;
      }
    }

任何人有一个快速修复？

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

您测试不同模式的打印预览和打印按钮。打印预览适用于当前页面，但不适用于模态。 =(

【问题讨论】：

标签： angularjs angular-ui-bootstrap angular-bootstrap

【解决方案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 个项目的大型模式，然后单击打印，您可以将内容很好地流到第二页。不错！

打印模态溢出问题：

修复溢出问题后的打印模式：

【讨论】：

太棒了！谢谢你分享这个。这真的很棘手。尝试了很多风格组合。最后，将overflow: visible!important; 添加到.modal 工作。
请注意，如果您没有将页面上的主要元素设置为 display:none，那么您可能会在打印中获得额外的空白页（因为具有 visibility:hidden 的长页面仍会占用垂直打印空间.) 我可以证明这个解决方案非常出色，在 Chrome 和 IE11 中都能完美运行，并且为我节省了几个小时。谢谢！

【解决方案2】：

使用引导框对话框。添加了打印按钮。

上面的答案太复杂了。我最终得到了我的模式来打印从 4 到大约 500 行的任意行数的整个表。问题是在哪里设置信息。
要覆盖 boostrap css，请使用 !important。

显示整个模态
设置模态溢出可见；

位于顶部
设置模态位置绝对值；前 0；左0；

使背景不可见：
模态对话框：使宽度为 100%；设置边距 0;
将背景设置为纯色（不透明度 1）白色；

js：

$modal = bootbox.dialog({
            title: title,
            message: report_table_html,
            className: 'modal-full',
            buttons: {

                print: {
                    label : '<i class="fa fa-print"></i> Print',
                    className: "btn-default hide-print print",
                    callback: function(result) {
                        window.print();
                    }
                },
                main: {
                    label: "Done",
                    className: "btn-default hide-print"
                }

            }

css:

.modal-full .modal-dialog {
     width: 90%;
}

@media print {
    .modal,
    .modal * {
        overflow: visible !important;
    }
    .modal {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
    }
    .modal-dialog {
        width: 100% !important;
        margin: 0;
    }
    .modal-backdrop {
        background-color: white;
        opacity: 1 !important;
    }
}

【讨论】：

【解决方案3】：

如果父 div 超过 1 页，这不是完整的证明，您可以在模态打印输出中看到空白页。我正在努力解决这个问题。很快就会发布。

[https://jsfiddle.net/ozkary/3zu008ch/][1]

  [1]: https://jsfiddle.net/ozkary/3zu008ch/

【讨论】：

【解决方案4】：

我发现@cainhs 的解决方案很完美，但有两个问题

正如 JD Smith 所说，您可能会得到额外的空白页
如果放大打印，打印效果会变得最差。

解决这两个问题

您需要将 height : auto 和 width : auto 放入您的@media print {}

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

【讨论】：

【解决方案5】：

您可以启用此选项 [背景图形] 以查看页面上额外打印的内容。希望这有助于找出根本原因。

【讨论】：