logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

真正好用的网页打印和分页方法:CSS+DIV或元素ID

 icecity1306 2015-02-04

2013-12-30 存心插柳 PHP&MySQL&WEB

2年前研究过关于网页如何打印的问题http:///post/12，当年是使用像素与打印出来的尺寸之间的关系手动换的，并且为了兼顾显示与打印，效果十分有限。幸运的是现在有了新的解决方法，并且相当的完善，几乎可以实现想要的任何效果，那就是使用CSS+DIV或元素ID：页面本身的HTML元素无需修改，通过不同的CSS来指定屏显和打印时候的样式。

 

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

通常我们会如下设置CSS：

1<!--内嵌式-->
2<style type="text/css">
3.demo1{...}
4.demo2{...}
5.demo3{...}
6</style>
7 
8<!--外联式-->
9<link rel="stylesheet" type="text/css" href="mycss.css">

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

 

01<!--内嵌式-->
02<style type="text/css">
03@media all{
04  .demo1{...}
05  .demo2{...}
06  .demo3{...}
07}
08</style>
09 
10<!--外联式-->
11<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: 

01<!--内嵌式-->
02<style type="text/css">
03@media screen{
04  .demo1{...}
05  .demo2{...}
06  .demo3{...}
07}
08@media print{
09  .demo1{......}
10  .demo2{......}
11  .demo3{......}
12}
13</style>
14 
15<!--外联式-->
16<link rel="stylesheet" type="text/css" href="screen.css" media="screen">
17<link rel="stylesheet" type="text/css" href="print.css" media="print">

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

二、如何设定打印尺寸

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

01<!--内嵌式-->
02<style type="text/css">
03@media screen{
04  .demo1{
05    width:500px;
06    height:400px;
07  }
08}
09@media print{
10  .demo1{
11    width:150mm;
12    height:120mm;
13  }
14}
15</style>
16 
17<!--body中的图片-->
18<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用来取消页分割符设置

 

使用范例：

01<!--内嵌式-->
02<style type="text/css">
03@media screen{
04  #demo1{
05    width:500px;
06    height:400px;
07  }
08  #demo2{
09    width:500px;
10    height:400px;
11  }
12 
13}
14@media print{
15  #demo1{
16    width:150mm;
17    height:120mm;
18    page-break-after:always;
19  }
20  #demo2{
21    width:150mm;
22    height:120mm;
23  }
24}
25</style>
26 
27<!--body中的图片，会在同一个页面显示，但是两幅图片会分别打印在2张纸上-->
28<img src="..." id="demo1">
29<img src="..." id="demo2">

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

 

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


 效果是一样的。

 

标签: css 500 IE Chrome 打印 网页打印 尺寸 分页

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： icecity1306 > 《开发资料》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多