Question

我有一个页面，其中包含一些要打印的内容。在打印时，必须隐藏一些div，并且必须出现一个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上却没有。

JS with setTimeout：

$(".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文件的问题。此文件负责隐藏/显示必须出现在打印件上的div。

Safari上的window.print问题

2 个答案: