在網站的某些應用程式中需要提供使用者直接列印頁面的功能,最明顯的就是電子優惠券,商家根據網站提供的範本輸入內容,然後產生優惠券頁面,使用者列印這個頁面即是優惠券。
當然最優的做法是根據這個頁面產生一個圖片文件,用戶下載這個圖片再去列印,列印的效果就不會受瀏覽器的設定而受影響列印出來的效果。
但如果因為某些原因,為了快速或節省成本,不去將頁面存為圖片檔案的操作,那麼就只有直接將HTML頁面直接列印下來,這樣就需要在對頁面的設計中有一些額外的要求,這裡提出兩個地方要注意:
1.對style標籤的屬性設定:
這裡表示該style內引入或定義的樣式屬性僅在列印的時候使用,這裡提醒一下,如果沒有設定media屬性,那麼定義的樣式將在瀏覽器和列印時都起效,所以建議將類似這樣的樣式放在所有常規樣式之後。例如我們希望在列印出來的頁面上有一行“列印與雅虎口碑網”,但在瀏覽器中並不現實:
列印與雅虎口碑網
那我們就可以在統一樣式中設定.printTitle{display:none;},而在後面的media為”print」的樣式中設定為.printTitle{display:block;}。在定義的列印樣式並不是列印時的優先順序會高於常規定義的樣式,所以再次建議將列印樣式放在所有常規樣式之後。
2.在頁面列印的時候瀏覽器的設定會對列印的效果有影響,在IE中的“工具”–“Internet選項”–“高級”中有一個“列印背景顏色和圖像”,類似的在Firefox中“文件”–“頁面設定”中有一個“打印背景顏色和圖像”,當這個選項被選中的時候,頁面中的背景顏色和圖片都可以打印出來(有些不標準的IE內核瀏覽器似乎有些問題,背景顏色可以列印出來,但是背景圖片不行),如果沒有選中則背景顏色和圖片都無法打印出來,所以為了屏蔽用戶不同的瀏覽器和瀏覽器設置,我建議兩點,第一是在用背景色填滿的區域作為分界的地方加上1px的邊框,顏色和背景色一樣,這樣在瀏覽器中看不出來變化,而在打印的時候即使用戶的設置導致背景色無法打印出來也可以有一個邊框來作為分割,最大層的上保留了頁面格局;第二是對所有必不可少的圖片都使用標籤,這樣無論用戶瀏覽器怎麼設置都可以將這些圖片打印出來,可能這樣與平時一些頁面設計方式不同,但為了統一列印的效果,也只要讓步了。
我這裡簡單的提出了一些在實際運用上遇到的問題,如果大家還有什麼新的問題和想法,可提出來共同談論,在這裡先拋磚了;
原文:http: //ued.koubei.com/? p=918