Safari 上 window.print 的问题

Question

我有一个页面有一些内容要打印。在打印的那一刻，一些 div 必须被隐藏并且只有一个必须出现。该代码在 Chrome、Firefox 和 IE 上运行良好，但在 Safari 上运行不正常。

这是我的 JS：

$(".printButton").on("click", function (event) {
    event.preventDefault();

    $("form").attr("style", "display: none !important");
    $("body").append("<div class='divToBePrinted' style='display: block !important;'></div>");
    $(".content").clone().appendTo('.divToBePrinted');

    window.print();

    $("form").removeAttr("style");
    $(".divToBePrinted").remove();
});

这是我的简化版 HTML:

<html>
    <body>
        <form>
            <!-- Other content -->
            <div class="content">
                Content to be printed.
            </div>
            <button class="printButton"></button>
            <!-- Other content -->
        </form>
    </body>
</html>

在 Safari 上，window.print() 似乎在 event.preventDefault() 之前执行，捕获整个页面以进行打印。

编辑：我尝试像下面这样使用 setTimeout，但没有用。有一个CSS专门用于打印，但是文件很大。我试图删除它，但我得到了相同的结果：在所有浏览器中都可以正常工作，但在 Safari 上却不行。

带有 setTimeout 的 JS：

$(".printButton").on("click", function (event) {
event.preventDefault();

$("form").attr("style", "display: none !important");
$("body").append("<div class='divToBePrinted' style='display: block !important;'></div>");
$(".content").clone().appendTo('.divToBePrinted');

//setTimeout(window.print, 1000); -- I tried this way

// And this way
setTimeout(function () {
    window.print();

    $("form").removeAttr("style");
        $(".divToBePrinted").remove();
    }, 0);
});

编辑 2：我尝试将 1000 毫秒设置为 setTimeout，它在大多数情况下都有效，但这不是最终解决方案，我将进行新的研究以找到更好的方法。

setTimeout(function () {
    window.print();

    $("form").removeAttr("style");
    $(".divToBePrinted").remove();
}, 1000);

Answer 1

onafterprint 事件似乎在 window.print 之后几乎立即触发。

在大多数浏览器上，直到用户在“打印对话框”上单击“打印”时才会调用此事件，但在 Safari 上，它似乎会在“打印对话框”出现时触发。

Answer 2

好吧，在尝试了很多事情之后，我仍然不明白为什么 window.print() 事件在 Safari 上的其他事件之前触发。但是我使用 @media print 为这个页面创建一个单独的 CSS 文件解决了这个问题。此文件负责 hide/show 必须只出现在打印件上的 div。

Safari 上 window.print 的问题

Issue with window.print on Safari

javascript

printing

safari

jquery