Javascript弹出打印页面阻止父操作

时间:2014-12-02 12:15:21

标签: javascript jquery

我有一个父页面调用子弹出页面来显示打印页面。重定向到打印页面之后如果我关闭子页面我可以在父页面中执行其他活动,但是当我最小化我的子页面(打印页面)并尝试一些活动它没有响应时,关闭子页面之后我做了什么它正在重建。

代码:

var chartDiv = document.getElementById('innerchartdiv');
var outerContainerDiv = document.getElementById('outerContainer');
var divToPrint = chartDiv.innerHTML;
setTimeout(function(){
var popupWin = window.open('', '_blank', 'width=800px,height=800px');
popupWin.document.open();
popupWin.document.write('<html><body align="center" style="margin:0% 17%;font-size:9px;">' +     chart+'</html>');
popupWin.document.close();
popupWin.focus();
popupWin.print();
popupWin.close();

1 个答案:

答案 0 :(得分:3)

不幸的是,如果你在弹出窗口上调用print,它就像一个警告框一样,它会阻塞线程!我之前遇到过这个问题,答案是打印对话框总会阻止JS线程。

这就是为什么许多网站在新标签中打开生成的PDF,而不是使用打印对话框。我知道这不是你想要的答案,但这也是人们使用自定义警报框的原因。阻止用户界面执行JS会破坏用户体验,并停止所有动画和事件触发,直到您单击为止。

备选建议:

你无法控制JS的弹出窗口,它实际上必须是一个超链接。但是有一种方法可以在没有服务器的情况下执行此操作客户端PDF生成工具和&lt; Blob URL&#39;在现代浏览器中工作,因此您也可以进行客户端PDF生成。试试jsPDF,我还没有使用过那个,但它可以解决问题。

ALSO:

跨浏览器打印css和大小调整不是很均匀,所以如果你想控制布局,PDF生成是迄今为止最简单的选择,以确保以预期的方式打印页面。我并不十分喜欢PDF格式,但这就是它如此受欢迎的原因。