如何强制CSS媒体类型被打印但在屏幕上？

Question

我想向用户展示打印时页面的外观，而不是实际要求他们单击打印按钮。我有必要的基于媒体查询的CSS进行打印，但这只会应用于打印预览和页面实际打印时。我的要求是在应用程序内的对话框中显示打印格式的页面。

Answer 1

我遇到了同样的项目需求。 AFAIK由于@media打印规则特定于打印到低成本设备，因此无法完成此操作，如specification。

我的解决方法是使用CSS来模拟打印的纸张。例如，我创建了一个带有灰色背景的div，然后是一个带白色背景的内部div，模拟纸张。我根据我的打印边距设置边距，并将html放在此容器中。这种方法并不能保证打印时期望的副本，因为诸如宽表和图像等元素可能使得容器比打印页面更宽，而打印引擎可以应用缩放。

复合这些问题，不可能可靠地预测打印引擎和打印机配置如何处理分页符。您可以在@media打印规则中提示css属性，例如page-break-inside，page-break-before，page-break-after,widows和orphans。在我的打印预览div中，我只是在仿真容器中布置一个连续的html，并向用户清楚这是一个仿真。