在網站的一些應用中需要提供用戶直接列印頁面的功能，最明顯的就是電子優惠券，商家根據網站提供的模板輸入內容，然後生成優惠券頁面，用戶列印這個頁面即是優惠券。
當然最優的做法是根據這個頁面生成一個圖片文件，用戶下載這個圖片再去列印，列印的效果就不會受瀏覽器的設置而受影響列印出來的效果。
但如果由於一些原因，為了快速或者節約成本，不去將頁面存為圖片文件的操作，那麼就只有直接將HTML頁面直接列印下來，這樣就需要在對頁面的設計中有一些額外的要求，這裡提出兩個地方需要注意：
1、對style標籤的屬性設置：
程序代碼
<style type="text/css" media="print">
這裡表示該style內引入或者定義的樣式屬性僅僅在列印的時候使用，這裡提醒一下，如果沒有設置media屬性，那麼定義的樣式將在瀏覽器和列印時都起效，所以建議將類似這樣的樣式放在所有常規樣式之後。比如我們希望在列印出來的頁面上有一行「列印與雅虎口碑網」，但在瀏覽器中並不現實：
程序代碼
<p class="printTitle">列印與雅虎口碑網</p>
那麼我們就可以在統一樣式中設置.printTitle{display:none;}，而在後面的media為」print」的樣式中設置為.printTitle{display:block;}。在定義的列印樣式並不是在列印時的優先級會高於常規定義的樣式，所以再次建議將列印樣式放在所有常規樣式之後。
2.在頁面列印的時候瀏覽器的設置會對列印的效果有影響，在IE中的「工具」–「Internet選項」–「高級」中有一個「列印背景顏色和圖像」，類似的在Firefox中「文件」–「頁面設置」中有一個「列印背景顏色和圖像」，當這個選項被選中的時候，頁面中的背景顏色和圖片都可以列印出來（有些不標準的IE內核瀏覽器似乎有些問題，背景顏色可以列印出來，但是背景圖片不行），如果沒有選中則背景顏色和圖片都無法列印出來，所以為了屏蔽用戶不同的瀏覽器和瀏覽器設置，我建議兩點，第一是在用背景色填充的區域作為分界的地方加上1px的邊框，顏色和背景色一樣，這樣在瀏覽器中看不出來變化，而在列印的時候即使用戶的設置導致背景色無法列印出來也可以有一個邊框來作為分割，最大層的上保留了頁面格局；第二是對所有必不可少的圖片都使用<img/>標籤，這樣無論用戶瀏覽器怎麼設置都可以將這些圖片列印出來，可能這樣與平時一些頁面設計方式不同，但為了統一列印的效果，也只要讓步了。
原文：
有需要點這裡...
文章來自WOWBOX
文章提供BAYSTARS DESIGN網頁設計公司
