Question

遇到一个有趣的浏览器问题 - 我已经实现了jQuery来切换页面的样式表链接href，点击按钮，在普通视图css文件和打印友好的css文件之间。它可以工作，除了当查看器进入打印友好版本时，我在应用新链接href后调用window.print（）。打印预览自动出现，在预览中，打印版本中应显示的任何元素：none都是可见的。如果单击“打印”，则打印出来，就像预览一样。如果你取消打印，那么屏幕上的页面仍处于打印友好模式，但一切都很好，没有任何东西是不可见的。然后，如果您右键单击并选择“打印...”，预览将按预期显示，并且所有内容均按照应有的方式打印。

这必须是一个浏览器，因为它只发生在Chrome中，而不是发生在FF中。

这是在单击按钮时调用的函数：

$('#printOnlyBtn').click(function(){
    if ($('#mainStylesheetLink').attr('href') == 'normal.css' {
        //switch to print-friendly css file and print
        doPrint();
    }
    else {
        //switch back to normal css file
        $('#mainStylesheetLink').attr('href', 'normal.css');
    }
});

function doPrint(){
    $('#mainStylesheetLink').attr('href', 'printFriendly.css');
        window.print();
    }

一种解决方案是取出对window.print（）的调用;只需使用一个按钮将页面置于打印友好模式，然后使用另一个按钮，用户必须单击才能实际打印页面。但是如果可能的话，我宁愿保持一键式处理。

Answer 1

我建议放弃链接到css文件的方法。相反，请尝试在您的CSS中使用@media print { ... }声明。在此块中包含特定于打印的样式。 https://developer.mozilla.org/en-US/docs/Web/CSS/@media上有很好的文档。

Answer 2

我使用setTimeout（）解决了这个问题。我认为那里有竞争条件或类似的东西，所以我只是将对window.print（）的调用延迟了100毫秒：

function doPrint(){
    $('##mainStylesheetLink').attr('href', '#printFriendly.css');
    setTimeout(window.print, 100);
}

我之前实际尝试过，但我将其编码如下，忘记延迟后执行的代码需要作为没有parens的回调函数传递给setTimeout（），否则会立即调用：

setTimeout(window.print(), 100);

打印版本无效

2 个答案: