媒体打印css无法在IE11打印预览中工作

Media print css not working in IE11 print preview

本文关键字：打印 工作 IE11 css 媒体      更新时间：2023-09-26

我有一个应用了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();
}

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

感谢

我看到了你的问题，但没有任何答案。我在使用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.excCommand"被用来代替经典的"window.print"函数。

我知道你发布它已经快一年了，我想你已经开始工作了。然而，为了社区的利益，这里有一个解决方案。我希望这也能帮助到任何人。

我在中添加了css样式

@媒体打印｛//css here｝

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

使用此

@media print and (-ms-high-contrast: none), (-ms-high-contrast: active) {
 css here
}
相关文章：