Question

尝试将打印功能用于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

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

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！

打印模式有溢出问题：

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

Answer 2

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

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

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

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

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

Answer 4

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

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

要解决这两个问题

您需要在您的@media打印{}中放入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 Modal页面会导致Google Chrome中断

5 个答案: