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

Javascript popup print page blocking the parent actions

本文关键字：操作 打印 Javascript      更新时间：2023-09-26

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

法典：

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();

不幸的是，如果您在弹出窗口中调用 print，它与警报框相同，它会阻止线程！我以前遇到过这个问题，答案是打印对话框将始终阻塞JS线程。

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

替代建议：

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

也：

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

相关文章：