网页打印分页

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

通常我们会如下设置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">

效果是一样的。

网页打印分页

时间: 2024-10-12 10:18:22

网页打印分页的相关文章

js实现网页打印分页打印

web打印思路:html页面本身带有打印功能window.print() 但是在打印时又不能word模板的要求来打印不能满足打印需求.同时我们打印的数据有时候是动态变化的需要按模板来打印我的处理方式是:1.按照word模板设计一个html页面模板,html页面包含了你所要输出的标签 例如:{名字}{时间} 打印区域,不打印区域,分页标签等 2.编写一个公用的打印类,传入参数使按照模板生成相应的数据,生成一个html页并显示. 3.打印 第一种方法:指定不打印区域比如页面的打印按钮等 使用CSS,

网页中如何用 CSS 设置打印分页符

Word 中按 Ctrl + Enter 创建一个分页符,方便打印,其实网页中也可以,用 CSS 的 page-break-after:always;. <p>第 1 页</p><div style="page-break-after:always;"></div><p>第 2 页</p><div style="page-break-after:always;"></div&g

web的各种前端打印方法之CSS控制网页打印样式

来源:http://www.jb51.net/web/70358.html CSS控制网页打印样式: 使用CSS控制打印样式,握刚刚使用时一塌糊涂,根本不知道CSS中的midia的作用是什么,问到别人说导入这个样式,还傻乎乎的不知所措.如果你也有这种现象,那么我告诉你吧,在W3school查到CSS的midia的作用. midia 定义和用法: media 属性规定被链接文档将显示在什么设备上. media 属性用于为不同的媒介类型规定不同的样式. 原来用到media来指定css的媒体类型,它的

借助Jquery Jqprint实现网页打印功能

今天利用闲余时间研究了一下Jquery Jqprint插件,使用该Jquery脚本可以轻而易举的实现打印网页指定区域内容的功能: 例子一: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&

网页打印A4纸-----表格在跨页时自动换页打印的实现 (转)

在最近所做的一个项目中,需要通过网页来打印不少的表单,但是又不想每个打印页签各占用一个页面,这样就需要生存很多不同的冗余页面,为了减少冗余,所有的表单通过jquery的页签tab来实现的. 一 :基本打印的实现: 1:tab页签在切换时的change事件中,记住每个页签的index, 2:在点击打印按钮时,根据所记住的index,由页签的id("tab名+index"组成),获取当前tab页签下所有的html; 3: 将获取到的需要打印页签的html赋值给document.body.i

A4纸网页打印 html网页页面的宽度设置成多少

A4纸竖向打印,html网页页面的宽度设置成多少?这个问题是我们大家所疑惑的,于是网上搜集整理下,希望可以帮助你们 最近开发项目时遇到了网页打印的问题,这是问题之二,打印宽度设置 在公制长度单位与屏幕分辨率进行换算时,必须用到一个DPI(Dot Per Inch)指标. 经过我仔细的测试,发现了网页打印中,默认采用的是96dpi,并非传闻的72dpi A4纸张的尺寸是210×297mm,按1英寸=25.41mm换算,即8.264×11.688英寸 所以,A4纸96dpi下的分辨率是794×112

c# 网页打印全流程

说明:我要实现的就是将数据库中Group表的数据查找出来,替换打印模版中的内容,再将模版文件打印出来 1.准备好要打印的模版group_O_train.html 1 <div class="pagetitle title">出国(境)培训人员汇总表</div> 2 <div>项目编号:{项目编号}</div> 3 <table class="pagedtable" style="width:25cm;f

android网页打印,安卓网页打印,h5页面打印,浏览器打印,js打印工具

Android设备打印比较麻烦,一般设备厂商都提供原生app开发的SDK,我们web开发者为难了,不会原生开发啊 给大家提供一个思路,实现web加壳,利用打印浏览器实现 简单来说就是把我们的web页面嵌入浏览器中 web页面的打印功能通过js与浏览器互动 浏览器通过调用硬件SDK实现打印 1.机器安装最新SDK,已安装请忽略 2.下载安装本页下载连接中的打印浏览器并安装 3.对照下方事例代码,修改web页面打印功能 4.打印浏览器中打开web页面,测试打印功能 5.默认主页可以在SD卡根目录修改

web 打印分页技巧

 page-break-after 和 page-break-before: page-break-before和page-break-after CSS属性并不会修改网页在屏幕上的显示,这两个属性是用来控制文件的打印方式.每个打印属性都可以设定4种设定值:auto.always.left和right.其中Auto是默认值,只有在有需要时,才需设定分页符号 (Page breaks).page-break-before若设定成always,则是在遇到特定的组件时,打印机会重新开始一个新的打印页.