javascript window.print() 的 Safari 打印问题答案

【问题标题】：Safari print issue with javascript window.print()javascript window.print() 的 Safari 打印问题
【发布时间】：2014-05-13 09:07:07
【问题描述】：

我在 Safari 上遇到打印问题。我的系统是 Windows 7，此功能在除 Safari 之外的所有其他浏览器中都可以正常工作。情况如下：

window.onload = function(){
    console.log('before print');
    window.print();
}

控制台面板不会输出日志，但会先出现打印页面，在打印页面选择取消后，会输出日志。

有没有人提出过这个问题？任何帮助将不胜感激。

更新

这是我的情况：我们需要打印一个用户可以通过选中和取消选中复选框来更改内容的页面，并且只打印该页面的内容部分，因此我们创建一个仅包含打印内容的新页面。在这个页面中，我们需要隐藏用户没有选择的不必要的内容，所以我们需要在window.print()被调用之前做一些DOM操作。 console.log() 只是用于观察的示例代码。我尝试在测试 HTML 中添加 <div id='test'>Test HTML</div> 并添加

var test = document.getElementById('test');
test.style.background = 'yellow';

在window.print(); 之前，它在我的 Safari 浏览器中显示相同的结果，“测试 HTML”不会变成黄色，直到我点击打印面板中的取消按钮，所以这不仅仅是 console.log 的问题。

更新

我在 Windows 7 上使用 Safari 5.1.7(7534.57.2)

【问题讨论】：

只是一个注释（我知道这是一个迟到的评论，但它适用于 14 年）。早在 12 年（当 Safari 6 发布时），Windows 的 Safari 就停止了。因此，如果您尝试在 Windows 上测试 Safari，请知道它不能代表 Mac 上的 Safari，并且知道许多“新”功能（例如一些 HTML5 的东西）根本不起作用，或者不会按预期工作。

标签： javascript printing safari

【解决方案1】：

对我来说，setTimeout 解决方案不起作用。我发现这个 jQuery 插件 https://github.com/jasonday/printThis 有很多针对 window.print() 的解决方法，因为它似乎并非被所有浏览器完全支持。

我选择了这条对我有用的线路 Safari document.execCommand("print", false, null)

这对我来说现在在 safari 和 chrome 中工作正常

try {
  document.execCommand('print', false, null);
}
catch(e) {
  window.print();
}

【讨论】：

【解决方案2】：

这是奇怪的行为。我在 Mac 上的 Safari 6.1 中进行了测试。

但是我可以问一下为什么你需要在打印之前记录一些东西吗？因为在弹出打印面板之前似乎所有的功能都在执行：

<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>

当您查看打印预览时，页面上会有“打印前”的文字。出于某种原因，控制台只会在打印面板关闭时记录文本，但我认为这对您的访问者来说并不重要。您可以在打印过程之前随意操作 DOM 和更改页面。

【讨论】：

是的@Stephan，没有必要添加console.log，但我确实需要在window.print()之前添加DOM操作代码，在我的Safari上，window.print();总是在JS代码之前执行对它来说，即使我替换 window.print() 而不是 setTimeout(window.print(),5000)，也会发生同样的事情。
嗯，这就是我的重点，DOM 在window.print() 之前被操纵。在 safari 中尝试我的示例，当您查看打印预览时，您会看到页面上有文字
不，在我的真实代码中，我确实在window.print() 之前操作了 DOM，但它不起作用，这就是我问这个问题的原因。您可以查看我对问题的更新，我尝试在 window.print(); 之前更改元素的文本颜色，但在单击打印面板上的取消按钮之前颜色没有改变。
我刚刚做了另一个测试，我更改了文本颜色和背景颜色，它确实工作正常。在您取消打印对话框之前它不会显示在页面上，但是当我打印页面时它的颜色确实发生了变化，即使没有 setTimeout，所以我不确定为什么它不能与您的代码一起使用
好吧，也许这只是 Windows Safari 上发生的问题。

【解决方案3】：

经过几次尝试，下面的代码可以正常工作，但我不知道原因，谁能解释一下？或者这是一个 Safari Bug？

window.onload = function() {
    $('body').html('After change');
    setTimeout(window.print, 1000);
};

【讨论】：

问题是浏览器在打印初始化时会停止 javascript 的执行。 Safari 可能会在执行 console.log 之前初始化打印，这意味着它会延迟日志。

【解决方案4】：

与其他浏览器不同，Safari 会在页面加载之前打印页面。因此 window.onload() 可以在新打开的 html 页面的代码中使用。但是如果打开的页面是非html内容，那就不行了。以下解决方案是跨浏览器和打开内容类型的全局解决方案。

var printWindow = window.open(url, '_blank');
$(printWindow).load(function()
{
    this.print();
});

【讨论】：

【解决方案5】：

添加一个适用于我的案例的解决方案：

首先制作你的弹出窗口。

$( ".myButton" ).click(function() {
    var url = 'www.google.com';
    var printWindow = window.open( url, '_blank');  
    printWindow.focus();
});

然后，在弹出窗口中加载的 HTML 页面内：

$(window).bind("load", function() {

    setTimeout( function () { 

      try {
        document.execCommand('print', false, null);
      }
      catch(e) {
        window.print();
      }

    }, 500);

});

【讨论】：