與屏幕相同的打印CSS

看來應該真的有一個簡單的解決方案，但到目前爲止，我一直沒有找到一個。與屏幕相同的打印CSS

我正在使用Zurb基金會，我基本上是創建一個實時表單，它從一個表單（上面）獲取輸入，並使用angular.js填充內容（如下）。用戶然後將打印頁面到PDF。我想保留下面內容的佈局，並且我想在打印時隱藏上面的表單。 Zurb有一個很好的「隱藏式打印」css規則，看起來應用於上面的表單時應該工作得很好，但是當我切換打印樣式表時，它基本上剝離了所有的CSS並回到醜陋。

對此提出建議？

來源

2013-03-28 ecirish

您是否嘗試過使用CSS媒體查詢print媒體？

.foo { 
    height:150px; 
    width:150px; 
    background-color:#F00 // see what I did there? 
} 

.bar { 
    height:10px; 
    width:50%; 
    border-radius:5px; 
    background-color:#000 
} 

.baz { 
    width:100px; 
    height:150px; 
    background-color:#FFF; 
} 

@media screen { 
    .baz { 
     display:block; 
    } 
} 

@media print { 
    .baz { 
     display:none; 
    } 
}

現在，只有.baz的性能有一些由媒體查詢目標。您可以隨意在查詢本身之內或之外放入.baz的任何屬性。同樣，你可以在媒體查詢中輸入全部的.baz的屬性，但我收集的不是你要找的。

來源

2013-03-28 05:35:00 Jules

我瞭解媒體查詢，但重點是我正在嘗試使用_same_樣式，並在打印時隱藏某些內容。將我所有的CSS複製到打印規則中似乎很麻煩。 – ecirish 2013-03-28 15:46:36

什麼阻止你？在媒體查詢之外放置除所涉及的class/id之外的所有樣式，並且只需將媒體查詢應用於此規則即可。我會更新我的答案以更好地說明我的觀點。 – Jules 2013-03-28 20:35:56

IDK的約zurb的打印樣式表，沒有一個例子，它回答是相當困難的，但你可以使用weasyprint，開放源碼庫HTML/CSS轉換爲PDF https://github.com/Kozea/WeasyPrint

來源

2013-03-28 07:08:44 albert

這看起來很有趣，但這似乎很好地處理分頁，我正在尋找一個簡單的一頁文檔。 – ecirish 2013-03-28 15:48:42

男人我的壞，我完全誤解了。做什麼@ phil說。只需在打印樣式表中將display：none放在窗體上即可。 – albert 2013-03-28 17:41:24

我在這些類型都做情況是使用print.css的單獨文件。

<link rel="stylesheet" type="text/css" href="global.css" /> 
<link rel="stylesheet" type="text/css" media="print" href="print.css" />

如果瀏覽器打印，global.css文件將被載入第一，比print.css文件將aftewards覆蓋任何東西。

請記住，所有background: *規則默認情況下會在所有瀏覽器中關閉打印，所以某些樣式無論如何都會受到攻擊。

來源

2013-03-28 16:21:43 Phil

與屏幕相同的打印CSS

回答

相關問題