如何挂钩到 window.print 对话框关闭事件以调用函数答案

【问题标题】：How can I hook into the window.print dialog close event to call a function如何挂钩到 window.print 对话框关闭事件以调用函数
【发布时间】：2012-09-05 15:39:50
【问题描述】：

如何挂钩到 window.print 对话框关闭事件来调用函数？

我正在使用 jQuery 插件 Datatables 和 Table tools plugin 从网页打印数据。

默认行为

将表格数据格式化为仅在页面上可见的元素
显示一个 div，告诉用户单击浏览器上的打印按钮。
用户打印后，用户必须按 Esc，这会使页面看起来与单击打印按钮之前一样。

期望的行为

数据格式相同
不显示点击打印按钮的说明
致电window.print();
打印对话框关闭后，使页面看起来与单击打印按钮之前一样。

【问题讨论】：

标签： javascript javascript-events

【解决方案1】：

不需要 JavaScript，这个 CSS 解决方案怎么样？这也应该适用于所有浏览器。

@media print
{
 /* Add here any selector for ('root') elements you do not want to be printed. */
 .header, .footer, .floating-print-instructions
 {
  display: none;
 }
}

请注意，如果选择器匹配在其style 属性中具有显式display: block（和类似属性）的元素等（或使用JavaScript），它可能仍会显示。

另外，我相信一些浏览器（Internet Explorer？）有beforeprint 和afterprint 事件，我想你可以听他们并采取相应的行动，但这并不是真正的跨浏览器实现，它更多一点比普通 CSS 复杂。

您可以通过监听 keyup/keydown 事件来了解用户按下了 Cotrol + P。但是，用户可以使用其他方式（菜单、工具栏按钮）进行打印。此外，在某些浏览器 (Chrome) 中，window.print() 是部分异步的（只有 window.close() 调用在它之后同步运行），因此您的代码可能会在它之后运行。

【讨论】：

你是说不要使用数据表打印功能，而只是使用 css 来隐藏不应该出现在打印输出上的东西吗？
我想是的。我不知道这些插件，我给了一个更通用的解决方案。
我喜欢数据表打印功能，因为用户仍然可以打印他们看到的页面，但是如果他们点击数据表打印按钮，它只会打印表中的数据。我可以看到这会有什么帮助，虽然不是为了我的需要。
好吧，我猜你也可以这样做。如果您连接到 Datatables 打印按钮，您可以向document.body 添加一个类，这将导致页面仅显示表格，否则显示所有内容。您可以通过使用 setImmediate/setTimeout（使用零超时等）来删除该类，尽管这不是最好的解决方案，是的。