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

Question

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

Answer 1

我在一个项目中遇到了同样的要求。根据specification，这是无法做到的，因为@media 打印规则专门用于打印到低成本设备。

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

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