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

【问题标题】：Media print css not working in IE11 print preview媒体打印 css 在 IE11 打印预览中不起作用
【发布时间】：2015-01-01 01:41:35
【问题描述】：

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

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();
}

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

谢谢

【问题讨论】：

您还有其他解决方案吗？

标签： javascript html css printing

【解决方案1】：

我在

中添加了我的css样式

@media print { //css 在这里 }

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

【讨论】：

【解决方案2】：

使用这个

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

【讨论】：

这将在启用高对比度模式浏览时启用 IE/Edge 中的打印样式。例如，如果您在打印样式中隐藏导航，启用高对比度的用户将无法浏览您的网站。

【解决方案3】：

我看到了你的问题，但没有任何答案。我在使用 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”函数。

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

【讨论】：