媒体打印 css 在 IE11 打印预览中不起作用

Question

我有一个应用了 css 的页面。 要自定义打印，在同一个 css 文件中我有一些 @media 打印样式。 这些在执行打印时工作得非常好，但是，使用 IE11 进行测试时，我意识到预览的工作方式就好像没有考虑媒体打印样式一样。 另一方面，如果我定义了一个全新的 css 样式并将其链接为打印样式表，那么预览也可以正常工作（但是这迫使我在这个 css 中复制许多在普通 css 样式表中定义的样式，即我不想改变印刷品）。

我不知道它是否有任何帮助，但我打印页面的方式是调用一个 javascript 函数，该函数仅选择我的 html 页面 (#content) 中 div 的内容并打印它（还添加了版权通知和打印页面底部的徽标）

function printit() {
    var body = document.getElementById('content').innerHTML;
    var tmpWin = window.open('', '', 'width=640,height=480');
    tmpWin.document.open("text/html");
    tmpWin.document
            .write("<html><head><link rel='stylesheet' href='css/stylesheet.css'></head><body>");

    tmpWin.document.write(body);
    //we add the copyright notice
    tmpWin.document.write("<div id='footer'><p>&copy; <script>document.write(new Date().getFullYear())</script> - All rights reserved</p><img id='logo_vertical' alt='DCL' src='img/logo_vertical.png'></div>")
    tmpWin.document.write("</body></html>");
    tmpWin.document.close();

    tmpWin.print();
    tmpWin.close();
}

知道为什么我会遇到这个问题吗？

谢谢

Answer 1

我看到了你的问题，但没有任何答案。 我在使用 ExtJS 4.2.2 的 IE 11 中遇到了同样的问题，我无法轻松找到解决方案。

似乎 IE 11 正在使用整个页面作为参考来拟合窗口内容，而不仅仅是窗口，正如预期的那样。 如果您使用打印预览，您可以检查此行为。

经过大量挖掘，测试了许多解决方法，我终于找到了一个可行的解决方案。 就我而言，我需要做的是修改打印脚本，如下所示：

 <div id="print">
        <button type="button" onclick="document.execCommand('print', false, null);">Print</button>
 </div>

在您的情况下，下面的代码应该可以工作（而不是 tmpWin.print()）：

tmpWin.document.execCommand('print', false, null);

如您所见，使用“document.execCommand”代替经典的“window.print”函数。

我知道你发布它已经快一年了，我想你已经让它工作了。 但是，为了社区着想，这里有一个解决方案。 我希望这也能帮助任何人。

Answer 2

用这个

@media print and (-ms-high-contrast: none), (-ms-high-contrast: active) {
 css here
}

Answer 3

我添加了我的 css 样式

@media print { //这里的css }

然后确保在 IE 上的打印设置中选中“打印背景颜色和图像”，以便能够将您的样式（颜色和背景）应用于打印页面

媒体打印 css 在 IE11 打印预览中不起作用

问题描述

3 个解决方案

解决方案1
2 2015-10-20 20:37:20

解决方案2
0 2018-12-06 07:24:56

解决方案3
0 2020-10-07 14:12:00

媒体打印 css 在 IE11 打印预览中不起作用

问题描述

3 个解决方案

解决方案1 2 2015-10-20 20:37:20

解决方案2 0 2018-12-06 07:24:56

解决方案3 0 2020-10-07 14:12:00

解决方案1
2 2015-10-20 20:37:20

解决方案2
0 2018-12-06 07:24:56

解决方案3
0 2020-10-07 14:12:00