javascript - 如何挂接到 window.print 对话框关闭事件以调用函数

Question

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

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

默认行为

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

期望的行为

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

Answer 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 属性等(或使用 JavaScript)中具有明确的 display: block(和类似的)，它将可能仍会显示。

另外，我相信一些浏览器(Internet Explorer？)有 beforeprint 和 afterprint 事件，我想你可以听取它们并采取相应的行动，但这不是真的一个跨浏览器的实现，它比纯 CSS 稍微复杂一些。

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