CSS實現不同的列印和螢幕顯示結果

2021-09-05 18:24:02 字數 397 閱讀 1012

來自:

通常的web頁面中,我們要求列印結果和顯示結果一樣,但在一些報表或業務系統中,我們可能只需要列印頁面中的一部分內容,例如我只要列印資料,但按鈕和背景不需要列印,這是由業務需求決定的,我們可以想象一下,如果一張列印出來的發票中出現乙個按鈕,你會怎麼想,估計要昏過去的,呵呵~~

好了,說完需求,我來說說如何實現,一種方法是為螢幕顯示和列印分別準備乙個css檔案,如下所示:

用於螢幕顯示的css:

用於列印的css:

注意,這兩個css是放在乙個web頁面裡面的。

還有一種是import方式:

最後一種寫法是可以直接把螢幕顯示樣式和列印樣式寫在乙個css檔案中:

} @media print裡面的內容只對列印出來的內容有效,之外的內容就是螢幕顯示的樣式。

CSS實現不同的列印和螢幕顯示結果

通常的web頁面中,我們要求列印結果和顯示結果一樣,但在一些報表或業務系統中,我們可能只需要列印頁面中的一部分內容,例如我只要列印資料,但按鈕和背景不需要列印,這是由業務需求決定的,我們可以想象一下,如果一張列印出來的發票中出現乙個按鈕,你會怎麼想,估計要昏過去的,呵呵 好了,說完需求,我來說說如何...

CSS實現不同的列印和螢幕顯示結果

通常的web頁面中,我們要求列印結果和顯示結果一樣,但在一些報表或業務系統中,我們可能只需要列印頁面中的一部分內容,例如我只要列印資料,但按鈕和背景不需要列印,這是由業務需求決定的,我們可以想象一下,如果一張列印出來的發票 現乙個按鈕,你會怎麼想,估計要昏過去的,呵呵 好了,說完需求,我來說說如何實...

用 CSS 實現列印顯示底色

1.把背景顏色寫成行內樣式,如下圖所示 但是發現這樣子寫了,並不行。可能還需要設定其他的,如果有知道的親,望不吝賜教 2.在列印的時候使用者自己設定,如下圖 該方法雖然奏效,但是出於使用者體驗的角度考慮,不太現實。3.直接用css 控制,此法有效,簡單 直接上 media print media p...