如何在 IE11 中打印角度对话框模式？答案

【问题标题】：How to print a angular dialog modal in IE11?如何在 IE11 中打印角度对话框模式？
【发布时间】：2020-04-13 17:14:30
【问题描述】：

一个 aspx 页面被加载到一个模态中，使用 Kendo Dialog 进行 Angular。此页面的预期行为是一旦生成它就会打开打印对话框。该打印操作的输出应该是 aspx 页面。从 Chrome/Firefox 打印时是这样，但 IE11 仅打印实际模态对话框后面的页面的一部分。

这在aspx代码中实现如下：

if (!(rsClinicList.EOF))
{
    Response.Write("onLoad=\"doPrint();\"");
}

调用的方法很简单：

function doPrint() {
    window.print();
}

所以这在 Chrome/Firefox 中完全符合预期，如何使用 IE11 打印正确的内容？

【问题讨论】：

标签： javascript angular printing modal-dialog internet-explorer-11

【解决方案1】：

我会说它会在 IE11 中呈现一些溢出。尝试使用 css 进行实验。一个可能的解决方案可能是创建一个容器，您可以将内容写入其中，该容器仅在打印时显示。喜欢这个解决方案：

Twitter Bootstrap: Print content of modal window

【讨论】：

【解决方案2】：

由于您使用的是 Kendo Dialog，请查看this article 并使用以下 CSS 样式打印 Dialog 内容：

要仅选择打印期间可见的对话框内容并隐藏页面的其余内容，请使用 CSS。

以下示例假定页面上仅存在一个 Dialog 实例。如果页面上存在多个 Dialog 实例并且只需要打印一个，请将 .k-dialog 类替换为手动应用于 Dialog 的包装器元素的自定义 CSS 类。

@media print
{
    body > *
    {
        display: none !important;
    }

    body > .k-dialog
    {
        display: block !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: auto !important;
        height: auto !important;
        border-width: 0;
        box-shadow: none !important;
    }

    .k-window .k-window-titlebar
    {
        display: none;
    }
}

【讨论】：