javascript window.print() 的 Safari 打印问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23626998/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Safari print issue with javascript window.print()
提问by YuC
I am having an issue with print on Safari. My System is Windows 7, and this function works fine in all other browsers except Safari. Here is the situation:
我在 Safari 上遇到打印问题。我的系统是 Windows 7，这个功能在除 Safari 之外的所有其他浏览器中都可以正常工作。这是情况：
window.onload = function(){
console.log('before print');
window.print();
}
It won't output the log in console panel, but the print page will appear first, after i choose cancel in print page, the log will be output.
它不会在控制台面板中输出日志，但会先出现打印页面，在打印页面中选择取消后，将输出日志。
Does any body came up with this issue? Any help will be appreciated.
有没有机构提出这个问题？任何帮助将不胜感激。
Updated
更新
Here is the situation i have:
We need to print a page whose content can be changed by user by checking and unchecking check box, and only the content part of this page should be printed, so we create a new page that only contains the content for printing. In this page, we need to hide the unnecessary content that is not selected by user, so we need to do some DOM operation before window.print()get called. The console.log()is just an example code for observing. I tried to add an <div id='test'>Test HTML</div>in test HTML and add
这是我的情况：我们需要打印一个用户可以通过选中和取消选中复选框来更改其内容的页面，并且只应打印该页面的内容部分，因此我们创建了一个仅包含内容的新页面用于打印。在这个页面中，我们需要隐藏用户没有选择的不需要的内容，所以在window.print()被调用之前我们需要做一些DOM操作。这console.log()只是用于观察的示例代码。我尝试<div id='test'>Test HTML</div>在测试 HTML 中添加一个并添加
var test = document.getElementById('test');
test.style.background = 'yellow';
before window.print();, it shows the same result in my Safari browser, the 'Test HTML' will not turn to yellow until i click cancel button in print panel, so it's not just the console.logissue.
之前window.print();，它在我的 Safari 浏览器中显示相同的结果，在我单击打印面板中的取消按钮之前，“测试 HTML”不会变成黄色，所以这不仅仅是console.log问题所在。
Updated
更新
I am using Safari 5.1.7(7534.57.2) on Windows 7
我在 Windows 7 上使用 Safari 5.1.7(7534.57.2)
采纳答案by YuC
After several times trying, below code works, but i don't know the reason, can anybody explain? Or this is a Safari Bug?
经过多次尝试，下面的代码有效，但我不知道原因，谁能解释一下？或者这是一个 Safari 错误？
window.onload = function() {
$('body').html('After change');
setTimeout(window.print, 1000);
};
回答by jperelli
For me, the setTimeoutsolution didn't work. I found this jQuery plugin https://github.com/jasonday/printThisthat has plenty of workarounds for window.print()because it seems not to be fully supported by all browsers.
对我来说，setTimeout解决方案不起作用。我发现这个 jQuery 插件https://github.com/jasonday/printThis有很多解决方法，window.print()因为它似乎没有被所有浏览器完全支持。
I took this line that worked for me Safari document.execCommand("print", false, null)
我把这条线对我有用 Safari document.execCommand("print", false, null)
and this worked ok for me for now in safari and chrome
这对我来说现在在 safari 和 chrome 中工作正常
try {
document.execCommand('print', false, null);
}
catch(e) {
window.print();
}
回答by Stephan Wagner
This is odd behavior. I tested in Safari 6.1 on Mac.
这是奇怪的行为。我在 Mac 上的 Safari 6.1 中进行了测试。
But may I ask why you need to log something before the printing? Because it seems that all the functions are being executed before the printing panel pops up:
但是我可以问为什么你需要在打印之前记录一些东西吗？因为在打印面板弹出之前，似乎所有的功能都在执行：
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
window.onload = function() {
$('body').html('before print');
console.log('before print');
window.print();
};
</script>
When you look at the print preview, the page will have the text "before print" on it. For some reason, the console will log the text only when the print panel closes, but in my opinion that doesn't really matter for your visitors. You can manipulate DOM and change the page before the printing process as you like.
当您查看打印预览时，页面上会显示“打印前”文本。出于某种原因，控制台只会在打印面板关闭时记录文本，但在我看来，这对您的访问者来说并不重要。您可以根据需要在打印过程之前操作 DOM 并更改页面。
回答by Ridhuvarshan
Safari prints the page before it is loaded unlike other browsers. Hence window.onload() can be used in the code of the newly opened html page. But if the page opened is non html content, then it is not possible. The below solution is global across browsers and type of content open.
与其他浏览器不同，Safari 会在页面加载之前打印页面。因此 window.onload() 可以在新打开的 html 页面的代码中使用。但是如果打开的页面是非html内容，那是不可能的。以下解决方案适用于所有浏览器和打开的内容类型。
var printWindow = window.open(url, '_blank');
$(printWindow).load(function()
{
this.print();
});
回答by Jennifer Michelle
Adding one more solution which worked for my case:
添加另一个适用于我的案例的解决方案：
First make your popup window.
首先制作你的弹出窗口。
$( ".myButton" ).click(function() {
var url = 'www.google.com';
var printWindow = window.open( url, '_blank');
printWindow.focus();
});
Then, inside the HTML page which is loaded in the popup:
然后，在弹出窗口中加载的 HTML 页面中：
$(window).bind("load", function() {
setTimeout( function () {
try {
document.execCommand('print', false, null);
}
catch(e) {
window.print();
}
}, 500);
});
