我有一个 Javascript 函数可以打印网页中两个元素的内容。它适用于 Chrome、Firefox 和 IE,但 Safari 只会显示一个空窗口,如果我选择打印,它只会打印一个空白页。
这是我的代码:
var content = "<!doctype html><html><head>";
content += '<link rel="stylesheet" href="/css/normalise.css" type="text/css" />';
content += '<link rel="stylesheet" href="/App_Themes/CS2011/StyleSheet.css" type="text/css" />';
content += "</head><body>";
//Find the div to insert the rest of the html after
var contractToFind = $(divElement).parent().find("div").get(0);
//Insert rest of code
content += contractToFind.innerHTML;
content += "</body></html>";
//Set up print window and print
var printWindow = window.open('', '', params);
printWindow.document.write(content);
printWindow.document.close();
printWindow.focus();
printWindow.print();
//Close the window
printWindow.close();
有没有一种方法可以修改我的代码以允许它在 Safari 中正确呈现页面以便我可以打印它?最好不使用额外的插件。
编辑:谢谢 Eric,但这对我不起作用。为打印添加时间延迟似乎效果很好,但并不理想,即使延迟 10 毫秒也能解决问题。我使用的线路是:
setTimeout(this.print, 100);
最佳答案
我找到了解决这个问题的方法。问题在于 window.print()
并不是所有浏览器的标准,Safari 可能在触发它时采用不同的方法。
我稍微更改了您的代码,因此此解决方案可能无法满足您的需求,但它适用于所有浏览器(已在 Safari、FF、Chrome、IE8 上测试)。
请注意,您需要为弹出内容设置一个不同的页面(我更改了代码以检索契约(Contract)以自己制作示例,希望您能弄清楚如何获取契约(Contract)内容)。
代码:
打开弹出窗口的页面的 HTML
<body>
<input type="button" id="popup" value="Open Popup" />
<div id="yourContract">
<div>blablabla</div>
<div>blablabla2</div>
<div>blablabla3</div>
<table>
<tr>
<td>blablabla td1</td>
<td>blablabla td2</td>
</tr>
<tr>
<td>blablabla td3</td>
<td>blablabla td4</td>
</tr>
</table>
</div>
</body>
<script>
$("#popup").click(function(){
var win = window.open("static.html");
});
</script>
弹出窗口的 HTML (static.html):
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$.holdReady(true);
$.getScript("print.js", function() {
$.holdReady(false);
});
</script>
</head>
<body>
<script>
var contract = window.opener.$("#yourContract").html(); //change to fit your needs
$("body").html(contract);
</script>
</body>
</html>
static.html调用的JS文件(print.js)
$(document).ready(function(){
window.print();
window.close();
});
它是如何工作的:
static.html
由两个 script
部分组成。正文部分通过 javascript 加载页面中的内容。
head 中的部分通过将holdReady
设置为true
来防止文档触发ready
状态。然后它加载 print.js
等待文档准备好,但我们将决定确切的时间,因为我们正在阻止它。
页面包含脚本后,holdReady
再次设置为false,触发ready
状态记录并调用print()
和 close()
函数在 window
上。
然而,这是在浏览器加载所有页面内容之后发生的,因此您将在弹出页面和打印对话框中看到预览。
希望这个解决方案是您所需要的。
关于Javascript 打印 div 在 Safari 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19678236/