打印友好版本不起作用答案

【问题标题】：Print-friendly version not working打印友好版本不起作用
【发布时间】：2017-03-06 21:20:12
【问题描述】：

遇到了一个有趣的浏览器问题——我已经实现了 jQuery 来切换页面的样式表链接 href，点击按钮，在普通视图 css 文件和打印友好 css 文件之间切换。它可以工作，除了当查看器转到打印友好版本时，我在应用新链接 href 后调用 window.print() 。打印预览会自动出现，并且在预览中，打印版本中应该具有 display: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(); 的调用。只需使用一个按钮将页面置于打印友好模式，然后用户必须单击另一个按钮才能实际打印页面。但如果可能的话，我更愿意让它保持一键式过程。

【问题讨论】：

标签： javascript jquery css google-chrome printing

【解决方案1】：

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

【讨论】：

感谢您的建议 - 我有点忙，所以没有太多时间重写 css，但我一定会看看。

【解决方案2】：

我只是使用 setTimeout() 解决了这个问题。我认为存在竞争条件或类似情况，所以我只是将 window.print() 的调用延迟了 100 毫秒：

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

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

setTimeout(window.print(), 100);

【讨论】：