首页 > 代码库 > 网页打印分页

网页打印分页

一、如何实现屏显和打印的区别: 

通常我们会如下设置CSS:

<!--内嵌式--><style type="text/css">.demo1{...}.demo2{...}.demo3{...}</style><!--外联式--><link rel="stylesheet" type="text/css" href="mycss.css"> 

实际上这个时候我们省略了一个叫做media属性,它是用来指定CSS的有效范围的。加上media属性的书写方法应该是这样:

<!--内嵌式--><style type="text/css">@media all{  .demo1{...}  .demo2{...}  .demo3{...}}</style><!--外联式--><link rel="stylesheet" type="text/css" href="mycss.css" media="all">

当然这样写和不加media属性是一样的,范围都是all,下面解释一下media其他值的意思:

media属性的值含义
 all 用于所有设备类型
 aural 用于语音和音乐合成器
 braille 用于触觉反馈设备
 embossed 用于凸点字符(盲文)印刷设备
 handheld 用于小型或手提设备
 print 用于打印机
 projection 用于投影图像,如幻灯片
 screen 用于计算机显示器
 tty 用于使用固定间距字符格的设备。如电传打字机和终端
 tv 用于电视类设备

实际上因为规范尚未统一,并不是所有值都可以用的,不过目前可以确认的是,主流的三款浏览器内核IE、火狐和Chrome都支持了all、screen和print,对于打印来说足够了。

那么在需要区分打印和屏幕显示的页面,我们就可以这样书写CSS: 

<!--内嵌式--><style type="text/css">@media screen{  .demo1{...}  .demo2{...}  .demo3{...}}@media print{  .demo1{......}  .demo2{......}  .demo3{......}}</style><!--外联式--><link rel="stylesheet" type="text/css" href="screen.css" media="screen"><link rel="stylesheet" type="text/css" href="print.css" media="print">

这样,在屏幕上的时候,就会按照screen的样式显示,而打印的时候,则会按照print的设定来打印。

二、如何设定打印尺寸

屏显的尺寸就不用多少了吧,像素是基本单位,根据情况选用em等。其实打印的时候也一样简单,使用实际的物理尺寸就可以了,常用的公制单位是厘米cm和毫米mm。以一个图片为例:

<!--内嵌式--><style type="text/css">@media screen{  .demo1{    width:500px;    height:400px;  }}@media print{  .demo1{    width:150mm;    height:120mm;  }}</style><!--body中的图片--><img src="..." class="demo1">

这样在屏显的时候就会显示为500*400px,而打印的时候就会打印成15*12厘米了。如果元素比较独立,使用id和#选择器也是一样可以的。

 

三、打印分页

打印分页是media提供的一个非常方便的属性,它可以让你将一个页面的内容分别打印在多张纸上,而不需要你将网页也做成多个页面,这个属性就是page-break-after,在CSS中设定page-break-after的值,然后在页面中需要分页地方插入这个属性就可以了,打印时会在当前元素的尾部分页。另外还有一个page-break-before,从名字上就可以看出,和page-break-after一样是用来分页的,不同的是它的位置在对象之前。

 page-break-after的可用属性值 含义
 auto 假如需要,在对象之后插入页分割符
 always 始终在对象之后插入页分割符
 avoid 避免在对象后面插入页分割符
 left 在对象后面插入页分割符直到它到达一个空白的左页边
 right 在对象后面插入页分割符直到它到达一个空白的右页边
 null 空值。IE5用来取消页分割符设置

 

使用范例:

<!--内嵌式--><style type="text/css">@media screen{  #demo1{    width:500px;    height:400px;  }  #demo2{    width:500px;    height:400px;  }}@media print{  #demo1{    width:150mm;    height:120mm;    page-break-after:always;  }  #demo2{    width:150mm;    height:120mm;  }}</style><!--body中的图片,会在同一个页面显示,但是两幅图片会分别打印在2张纸上--><img src="..." id="demo1"><img src="..." id="demo2">

当然,我们也可以使用内联的代码来分页

<img src="..." id="demo1" style="page-break-after:always;"><img src="..." id="demo2">

 效果是一样的。

网页打印分页

网页打印分页