如何強制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，並向用戶清楚這是一個仿真。