易于打印的版本无法正常工作

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

这必须是一个浏览器的东西，因为它只发生在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（）;只需使用一个按钮将页面置于易于打印的模式，然后再次点击另一个按钮即可实际打印页面。但如果可能的话，我宁愿保持一键式过程。

来源

2017-03-06 Cmaso

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

来源

2017-03-06 21:25:13

感谢您的建议 - 我就有点不足，所以没有太多时间来重写CSS，但我一定会看看。 – Cmaso

我刚刚使用setTimeout（）解决了这个问题。我想有一个竞争条件或类似的东西，所以我只是推迟了呼叫100毫秒window.print（）：

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

其实我试过之前，但我编码它下面，忘记了延迟后要执行的代码需要为没有括号的回调函数传递到的setTimeout（），否则立即调用：

setTimeout(window.print(), 100);

来源

2017-03-06 22:08:41 Cmaso

易于打印的版本无法正常工作

回答

相关问题