在打印之前查看打印CSS

對於與屏幕上顯示的內容不同的打印，我們使用@media打印規則。那麼好。但是我想在瀏覽器窗口中顯示打印對話框彈出之前究竟打印什麼。有沒有辦法做到這一點？在打印之前查看打印CSS

http://stackoverflow.com/questions/18803151/如何使用觸發器進行媒體查詢 - 用戶需求 - 使用javascript – JNF

問題不在於調整大小。我想要顯示要在瀏覽器窗口上打印的內容。 –

一個完全開箱即用的想法可能是使用一個iframe來設置它的'head'' meta'作爲打印機而不是網頁？但是，如果可能的話，我不知道如何在技術上做到這一點。 – Vadorequest

您可以使用本文中的相同概念How to trigger media query on user demand with javascript，但是您可以使用按鈕觸發/切換名稱爲previewprint的正文標籤的類名稱。

而且你的CSS看起來是這樣的：

body.previewprint .yourclass { 
    property: value; 
} 

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

一種方法是添加一個單獨的「預覽」按鈕，設置previewprint和「打印」按鈕復位/清除它。

如果你不想擁有雙css規則，那麼只要使用previewprint類就可以了，如果你在新窗口中用「預覽」按鈕打開頁面，那麼用戶可以點擊「打印「按鈕。在這種情況下，「打印CSS規則」已經設置，不需要媒體查詢。

如果只使用「打印」按鈕，請執行相同操作，然後在加載時執行window.print()。

我還發現這個不錯的帖子，how to detect window.print() finish，在打印完成後你可以做一些很酷的東西。

要攔截Ctrl + P鍵，這裏是展示如何可以做幾個帖子：

2015-11-10 14:03:40 LGSon

您的解決方案正常工作。但我們可以做到沒有重複嗎？ –

@ user3930007稍微更新了我的答案，以顯示沒有重複規則的方式......這也使得它對不支持媒體查詢的瀏覽器更加「老舊瀏覽器友好」。 – LGSon

這也適用，但如果用戶按下ctrl + P，則不會觸發任何操作。 –

回答