打印内容大于 1 页的 Bootstrap 模式页面会导致 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;
      }
    }

有人有 quick 修复程序吗？

笨蛋： 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 个项目的 Large Modal，然后单击 Print，您的内容就会很好地流到第二页。不错！

打印模式出现溢出问题：

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

Answer 2

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

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

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

Answer 3

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

上面的答案太复杂了。我最终得到了我的模态来打印整个 table 从 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;
    }
}

Answer 4

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

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

解决这两个问题

您需要在您的@media print 中添加 height : auto 和 width : auto {}

@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;
  }
}

Answer 5

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

打印内容大于 1 页的 Bootstrap 模式页面会导致 Google Chrome 被截断

Printing a Bootstrap Modal page with contents larger than 1 page results in cut off in Google Chrome

angularjs

angular-ui-bootstrap

angular-bootstrap