媒体打印CSS不工作在IE11打印预览

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

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

任何想法为什么我有这个问题？

谢谢

来源

2014-11-05 miks87

你有没有找到其他溶剂？ – 2017-03-20 22:56:35

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

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

来源

2015-10-20 20:37:20

媒体打印CSS不工作在IE11打印预览

回答

相关问题