|
在網(wǎng)站的一些應(yīng)用中需要提供用戶(hù)直接打印頁(yè)面的功能，最明顯的就是電子優(yōu)惠券，商家根據(jù)網(wǎng)站提供的模板輸入內(nèi)容，然后生成優(yōu)惠券頁(yè)面，用戶(hù)打印這個(gè)頁(yè)面即是優(yōu)惠券。
當(dāng)然最優(yōu)的做法是根據(jù)這個(gè)頁(yè)面生成一個(gè)圖片文件，用戶(hù)下載這個(gè)圖片再去打印，打印的效果就不會(huì)受瀏覽器的設(shè)置而受影響打印出來(lái)的效果。
但如果由于一些原因，為了快速或者節(jié)約成本，不去將頁(yè)面存為圖片文件的操作，那么就只有直接將HTML頁(yè)面直接打印下來(lái)，這樣就需要在對(duì)頁(yè)面的設(shè)計(jì)中有一些額外的要求，這里提出兩個(gè)地方需要注意：
1.對(duì)style標(biāo)簽的屬性設(shè)置：
<style type=”text/css” media=”print”>
這里表示該style內(nèi)引入或者定義的樣式屬性?xún)H僅在打印的時(shí)候使用，這里提醒一下，如果沒(méi)有設(shè)置media屬性，那么定義的樣式將在瀏覽器和打印時(shí)都起效，所以建議將類(lèi)似這樣的樣式放在所有常規(guī)樣式之后。比如我們希望在打印出來(lái)的頁(yè)面上有一行“打印與雅虎口碑網(wǎng)”，但在瀏覽器中并不現(xiàn)實(shí)：
<p class=”printTitle”>打印與雅虎口碑網(wǎng)</p>
那么我們就可以在統(tǒng)一樣式中設(shè)置.printTitle{display:none;},而在后面的media為”print”的樣式中設(shè)置為.printTitle{display:block;}。在定義的打印樣式并不是在打印時(shí)的優(yōu)先級(jí)會(huì)高于常規(guī)定義的樣式，所以再次建議將打印樣式放在所有常規(guī)樣式之后。
2.在頁(yè)面打印的時(shí)候?yàn)g覽器的設(shè)置會(huì)對(duì)打印的效果有影響，在IE中的“工具”–“Internet選項(xiàng)”–“高級(jí)”中有一個(gè)“打印背景顏色和圖像”，類(lèi)似的在Firefox中“文件”–“頁(yè)面設(shè)置”中有一個(gè)“打印背景顏色和圖像”，當(dāng)這個(gè)選項(xiàng)被選中的時(shí)候，頁(yè)面中的背景顏色和圖片都可以打印出來(lái)（有些不標(biāo)準(zhǔn)的IE內(nèi)核瀏覽器似乎有些問(wèn)題，背景顏色可以打印出來(lái)，但是背景圖片不行），如果沒(méi)有選中則背景顏色和圖片都無(wú)法打印出來(lái)，所以為了屏蔽用戶(hù)不同的瀏覽器和瀏覽器設(shè)置，我建議兩點(diǎn)，第一是在用背景色填充的區(qū)域作為分界的地方加上1px的邊框，顏色和背景色一樣，這樣在瀏覽器中看不出來(lái)變化，而在打印的時(shí)候即使用戶(hù)的設(shè)置導(dǎo)致背景色無(wú)法打印出來(lái)也可以有一個(gè)邊框來(lái)作為分割，最大層的上保留了頁(yè)面格局；第二是對(duì)所有必不可少的圖片都使用<img/>標(biāo)簽，這樣無(wú)論用戶(hù)瀏覽器怎么設(shè)置都可以將這些圖片打印出來(lái)，可能這樣與平時(shí)一些頁(yè)面設(shè)計(jì)方式不同，但為了統(tǒng)一打印的效果，也只要讓步了。
我這里簡(jiǎn)單的提出了一些在實(shí)際運(yùn)用中遇到的問(wèn)題，如果大家還有什么新的問(wèn)題和想法，可提出來(lái)共同談?wù)�，在這里先拋磚了；
原文：http://ued.koubei.com/?p=918
本文鏈接：http://www.95time.cn/tech/web/2009/6837.asp 
出處：口碑網(wǎng)UED Team
責(zé)任編輯：bluehearts
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
