Question

我已经应用了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();
}

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

由于

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

如您所见，＆＃34; document.execCommand＆＃34;用来代替经典＆＃34; window.print＆＃34;功能

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

Answer 2

使用此

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

Answer 3

我在其中添加了CSS样式

@media print {// css here}

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

媒体打印css无法在IE11打印预览中使用

3 个答案: