直接将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/>标签,这样无论用户浏览器怎么设置都可以将这些图片打印出来,可能这样与平时一些页面设计方式不同,但为了统一打印的效果,也只要让步了。

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

时间: 2024-10-29 00:23:34

直接将HTML页面打印页面的设计的相关文章

设计直接将HTML页面打印页面

在网站的一些应用中需要提供用户直接打印页面的功能,最明显的就是电子优惠券,商家根据网站提供的模板输入内容,然后生成优惠券页面,用户打印这个页面即是优惠券. 当然最优的做法是根据这个页面生成一个图片文件,用户下载这个图片再去打印,打印的效果就不会受浏览器的设置而受影响打印出来的效果. 但如果由于一些原因,为了快速或者节约成本,不去将页面存为图片文件的操作,那么就只有直接将HTML页面直接打印下来,这样就需要在对页面的设计中有一些额外的要求,这里提出两个地方需要注意: 1.对style标签的属性设置

页面打印技术总结

一.概述   对基于B/S架构的应用程序而言,客户端的页面打印一直是比较头疼的问题,简单的做法是:1.使用IE的打印功能:2.使用水晶报表.但以上两种办法,都有很大的局限性,很难实现特殊要求的排版和精确的定位,所以不能满足一些特殊客户的BT要求.为此,本人总结了自己在使用Web打印上的一点经验,和大家分享.   本文涉及以下技术:javascript.ActiveX.ASP.NET.GDI+. 二.基本架构   首先,我们不能使用IE的打印功能,必须自己设计'打印'按钮.很多人习惯将'打印'按钮

Excel怎么设置打印页面边距

  要想打印一份既简洁又漂亮的表单出来,不仅仅是会设计制作表单,还要学会设置页面边距.将表单拿在手里一看,左边宽右边窄,上边多了下边少了,就算这份表单设计得多么完美,那也要减去不少印象分,呵呵,因小失大啊!下面我们一起来看看. 方法/步骤 1.首先打开一份文档,输入我们需要打印的内容,当然表单设计得更加完美,那就是锦上添花. 2.点击工具栏中的"页面布局",再在子菜单中选择"页边距",然后在下拉菜单中选择"自定义边距". 3.在页面设置对话框中点

秋色园QBlog技术原理解析:性能优化篇:打印页面SQL,全局的SQL语句优化(十三)

文章回顾: 1: 秋色园QBlog技术原理解析:开篇:整体认识(一) --介绍整体文件夹和文件的作用 2: 秋色园QBlog技术原理解析:认识整站处理流程(二) --介绍秋色园业务处理流程 3: 秋色园QBlog技术原理解析:UrlRewrite之无后缀URL原理(三) --介绍如何实现无后缀URL 4: 秋色园QBlog技术原理解析:UrlRewrite之URL重定向体系(四) --介绍URL如何定位到处理程序 5: 秋色园QBlog技术原理解析:Module之页面基类设计(五) --介绍创建

使用网页代码“截取”功能,打印页面某段定义区域内容

打印|网页|页面 以前用户在打印网页内容时,一般直接选择IE的打印功能就行.有的WEB页面上也有"打印此文档"的链接功能,引用的也是"window.print();",类似于手工打印页面. 一般我们用到网页的打印,都仅对页面上的主要内容感兴趣,一些相关的广告图片.无用的文字信息等都可以排除.如果需要实现这样的效果,则使用上面的方法肯定是不可取的.上次我在写域名查询的时候,使用了XML,同时处理查询反馈信息是进行截取的方法,即仅对有用处的信息进行读取.其实网上那些所谓

一般要求下的页面打印

打印|页面 <OBJECT id=WebBrowser classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 width=0> </OBJECT> <input type=button value=打印 onclick=document.all.WebBrowser.ExecWB(6,1)> <input type=button value=直接打印 onclick=document.all.Web

ASP打印页面的一些经验

打印|页面 大家经常遇到再ie中打印表格时需要隐藏一些不需要打印的对象,比如说按钮,输入框,或者希望莫个表格显示的时候表格线是由颜色的,而打印的时候只需要有粗细之分,其实在css中可以设定在打印或者显示的不同样式,最近作了一个应用(实属逼上梁山),可以得到以上效果,下面是我的样式表....<style type="text/css" media=print> 主要是media选项对照下面的那一个style一起看.noprint{visibility:hidden}span.

利用http组件来实现页面打印

打印|页面 HTTP组件,我所知道的有ASPHTTP,ASPTEAR等等,这里我们要用的是比尔的XMLHTTP,如果你机器上没有,可以到这里下载 http://www.microsoft.com/data 下载mdac2.6 http://msdn.microsoft.com/workshop/xml/index.asp 下载msxml 象大多数我们看到的页面一样,比如一个新闻具体内容页面,该页面有个连接叫打印本页,点进去以后,并不是立即打印(当然也可以做到,我指的是选择性打印),而是出现一个去

php 5.3访问Yii框架自带的例子系统时页面打印500错误

访问Yii框架自带的例子系统时,页面打印500错误: Error 500 date() [<a href='function.date'>function.date</a>]: It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function.