当前位置:首页 > 开发 > Web前端 > Css > 正文

用于打印的页面设计的CSS

发表于: 2011-07-18   作者:charrysong   来源:转载   浏览次数:
摘要: 在网站的一些应用中需要提供用户直接打印页面的功能,最明显的就是电子优惠券,商家根据网站提供的模板输入内容,然后生成优惠券页面,用户打印这个页面即是优惠券。当然最优的做法是根据这个页面生成一个图片文件,用户下载这个图片再去打印,打印的效果就不会受浏览器的设置而受影响打印出来的效果。但如果由于一些原因,为了快速或者节约成本,不去将页面存为图片文件的操作,那么就只有直接将HTML页面直接打印下来,这样就

在网站的一些应用中需要提供用户直接打印页面的功能,最明显的就是电子优惠券,商家根据网站提供的模板输入内容,然后生成优惠券页面,用户打印这个页面即是优惠券。
当然最优的做法是根据这个页面生成一个图片文件,用户下载这个图片再去打印,打印的效果就不会受浏览器的设置而受影响打印出来的效果。
但如果由于一些原因,为了快速或者节约成本,不去将页面存为图片文件的操作,那么就只有直接将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/》标签,这样无论用户浏览器怎么设置都可以将这些图片打印出来,可能这样与平时一些页面设计方式不同,但为了统一打印的效果,也只要让步了。

我这里简单的提出了一些在实际运用中遇到的问题,如果大家还有什么新的问题和想法,可提出来共同谈论,在这里先抛砖了!

转自:http://www.ok22.org/art_detail.aspx?id=165

用于打印的页面设计的CSS

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
  大多数Web设计师对打印控制还不是很熟悉,他们往往更迷恋像素,而不是打印机。在现实世界中,很
摘要:本文将介绍一些CSS设计技巧,包括取消下划线、设计响应式视频、背景图片的设置以及相对值等。
开源的javascript实现页面打印功能,兼容所有的浏览器(情况属实) 这篇文章完全是属于技术文章,也
ps+div+css打造蓝色后台 做到兼容主流浏览器 如何设计一个页面? 如何切片才能更好的配合实现? 如
如果你对许多从事网页开发的人提起打印样式,他们第一反映会想到使用打印CSS。当网页文档需要被打印
前一段时间,我根据自己的项目要求设计了一个基于FastReport的Web打印控件,然后把它稍做修改,挂到
前一段时间,我根据自己的项目要求设计了一个基于FastReport的Web打印控件,然后把它稍做修改,挂到
  在设计每个页面的时候,我们先要想好页面的整体框架后再写,这样思路清晰,页面也整齐,不容易
css实现页面布局 外边距和内边距: Margin:内边距,padding:外边距,这里我们要注意的是当有DIV嵌
偶然看到这篇文章,让我欣赏悦目。有一种拨云见日的感觉,通体畅快。特记下与各位分享 这篇随笔不是
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号