Question

对于与屏幕上呈现的内容不同的打印，我们使用@media打印规则。好，好。但是我想在浏览器窗口中显示在弹出打印对话框之前准确打印的内容。有没有办法做到这一点？

Answer 1

您可以使用此帖How to trigger media query on user demand with javascript中的相同概念，而是使用按钮触发/切换正文标记的类名称，名为previewprint。

你的css看起来像这样：

body.previewprint .yourclass {
   property: value;
}

@media print {
  .yourclass {
    property: value;
  }
}

一种方法是添加单独的＆＃34;预览＆＃34;按钮设置previewprint和＆＃34;打印＆＃34;按钮重置/清除它。

如果您不想拥有双重css规则，那么仅使用previewprint类就可以了，如果您在新窗口中使用＆＃34;预览＆＃34;按钮，一旦出现，用户可以点击＆＃34;打印＆＃34;按钮。在这种情况下，＆＃34;打印css规则＆＃34;已设置，无需媒体查询。

如果只使用＆＃34;打印＆＃34;按钮，执行相同操作，然后在加载时执行window.print()。

我还发现了这篇不错的帖子how to detect window.print() finish，你可以在打印结束时做一些很酷的事情。

要拦截Ctrl + P，这里有一些帖子展示了如何做到这一点：