javascript - 为什么当打印对话框中的页面时数据未加载到表中

Question

我这里有问题我制作了一个具有打印页面功能的页面，其中包含动态表。打印功能方法是在新选项卡中打开包含动态表的页面html，然后打开打印对话框。该过程进展顺利，但是当我添加 ajax 调用以在动态表中显示数据时。数据未显示在打印对话框中的表格中..但是当我取消打印对话框并且必须打印的页面显示数据正在显示时...

如何修复它。

这是页面图片

我用这个代码来打印

 <script>
	function myFunction() {
   	
	window.open('SPL.html','','height=650,width=1200').print();
	}
	
	</script>

Answer 1

您还没有提供生成器的代码，所以我只是向您解释为什么它不起作用以及您可以做什么。

窗口的一个很好的引用Mozilla Window Open

您可以在那里阅读有关可能的功能等的更多详细信息。你的问题是:

window.open('SPL.html','','height=650,width=1200').print();

打开文件后直接调用打印函数，此时您的脚本和ajax请求尚未完成。这就是为什么它只使用预定义的 html 和 css 代码向您显示当前状态。

所以你要做的就是在完成后调用 print 。有很多方法可以实现这一目标。

最简单的打开方式是这样的:

window.open('SPL.html','','height=650,width=1200')

在 SPL.html 中，您将 js 脚本堆叠在其中:

$(document).ready() {
 //Your Generator
}

这个小片段可以确保所有依赖项(外部脚本和 dom 元素)在生成器运行之前创建，并为我们提供了执行下一个函数的可能性:

$(window).load(function(){
  window.print()
});

这是 globalEventHandler window.onload 的一个版本。基本上，如果您阅读文档，它会在加载所有内容后触发，包括图像、框架、对象等。棘手的部分也在 document.ready 之后，这可以确保我们的生成器在运行打印命令之前完成。

我希望这会有所帮助，如果您确实想将打印命令粘贴到首页中，我也可以给您一个例子。但它并不像这个解决方案那样有效。啊，如果你想坚持使用 @Saurabh 解决方案，你必须为你的 Iframe 使用 allow-modals ，否则将无法打印。官方文档中也提到了。