css如何设计打印html页面?

发布时间:2019-10-10编辑:脚本学堂
本文简单讲述在直接打印html页面时,css是如何设计的?需要的同学学习下。

有时候网站的应用中需要提供用户直接打印页面的功能,如:最明显的就是电子优惠券,商家根据网站提供的模板输入内容,然后生成优惠券页面,用户打印这个页面即是优惠券。
当然最好的做法是根据这个页面生成一个图片文件,打印的效果就不会受浏览器的设置而受影响打印出来的效果。

但如果由于一些原因,为了快速或者节约成本,不去将页面存为图片文件的操作,就只有直接将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/》标签,这样无论用户浏览器怎么设置都可以将这些图片打印出来,可能这样与平时一些页面设计方式不同,但为了统一打印的效果,也只好让步了。

以上简单的提出了一些在实际运用中遇到的问题,大家还有什么新的问题和想法,提出来我们共同讨论。