Jef*_*eus 5 javascript printing safari jquery
我有一个页面,有一些内容要打印.在打印时,必须隐藏一些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与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);
好吧，在尝试了很多事情之后，我仍然不明白为什么该window.print()事件在 Safari 上的其他事件之前触发。但我解决了为该页面创建一个单独的 CSS 文件的问题，使用@media print. 该文件负责隐藏/显示必须仅出现在打印上的 div。