在调用window.print()时，可以实现打印效果，但内容太多时要进行分页打印。

在样式中有规定几个打印的样式

page-break-before和page-break-after CSS属性并不会修改网页在屏幕上的显示，这两个属性是用来控制文件的打印方式。

每个打印属性都可以设定4种设定值：auto、always、left和right。其中Auto是默认值，只有在有需要时，才需设定分页符号 (Page breaks)。

page-break-before若设定成always，则是在遇到特定的组件时，打印机会重新开始一个新的打印页。

page-break-before若设定成left，则会插入分页符号，直到指定的组件出现在一个左边的空白页上。

page-break-before若设定成right，则会插入分页符号，直到指定的组件出现在一个右边的空白页上。

page-break-after属性会将分页符号加在指定组件后，而非之前。

在下列程序中您将可以看到这些属性的设定，

<HTML>

　　<HEAD>

　　　　<TITLE>Listing 14-4</TITLE>

　　</HEAD>

　　<BODY>

　　　　<DIV>This is the first DIV.</DIV>

　　　　<DIV STYLE="page-break-before:always">This is the second DIV.</DIV>

　　　　<DIV STYLE="page-break-after:always">This is the third DIV.</DIV>

　　　　<DIV>This is the fourth DIV.</DIV>

　　　　<DIV STYLE="page-break-before:right">This is the fifth DIV.</DIV>

　　　　<DIV STYLE="page-break-after:right">This is the sixth DIV.</DIV>

　　　　<DIV>This is the last DIV.</DIV>

　　</BODY>

</HTML>
值 描述
auto 默认值。如果必要则在元素前插入分页符
always 在元素前插入分页符
avoid 避免在元素前插入分页符
left 在元素之前足够的分页符，一直到一张空白的左页为止
right 在元素之前足够的分页符，一直到一张空白的右页为止
inherit 规定应该从父元素继承 page-break-before 属性的设置

在Dom对象中pageBreakBefore属性

语法:

Object.style.pageBreakBefore=auto|always|avoid|left|right

<html>

　　<head>

　　　　<script type="text/javascript">

　　　　　　function setPageBreak()

　　　　　　{

　　　　　　　　document.getElementById("p2").style.pageBreakBefore="always";

　　　　　　}

　　　　</script>

　　</head>

　　<body>

　　　　<p>This is a test paragraph.</p>

　　　　<input type="button" onclick="setPageBreak()" value="Set page-break" />

　　　　<p id="p2">This is also a test paragraph.</p>

　　</body>

</html>

JS 实现分页打印的更多相关文章

  1. js控制分页打印、打印分页示例

    1 打印分页 需要添加一段代码 <div  style="page-break-before:always;"><br /></div> 2 & ...

  2. js实现网页打印分页打印

    web打印思路:html页面本身带有打印功能window.print() 但是在打印时又不能word模板的要求来打印不能满足打印需求.同时我们打印的数据有时候是动态变化的需要按模板来打印我的处理方式是 ...

  3. JS重构分页

    JS重构分页 很早以前写过一个Jquery分页组件,但是当时写的组件有个缺点,当时的JS插件是这样设计的:比如:点击  -->  查询按钮 ---> 发ajax请求 返回总页数和所有数据, ...

  4. C#设计模式总结 C#设计模式(22)——访问者模式（Vistor Pattern） C#设计模式总结 .NET Core launch.json 简介 利用Bootstrap Paginator插件和knockout.js完成分页功能 图片在线裁剪和图片上传总结 循序渐进学.Net Core Web Api开发系列【2】：利用Swagger调试WebApi

    C#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...

  5. 使用ScriptX控件实现IE浏览器分页打印功能

    之前讲过js调用ie浏览器自带打印的用法,今天讲使用插件的方式.浏览器自带打印不能控制页边距.页眉页脚等选项,尤其是如果分页打印的话,无法自动将前一页标题带到本页,所以不适用多页打印的功能.使用Scr ...

  6. 原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）

    虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...

  7. 原生JS实现分页效果1.0

    不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...

  8. 纯js实现分页

    原理:所有数据已加载好,js通过遍历部分显示,实现分页效果 html代码 <html> <head> <meta charset='utf-8'> <scri ...

  9. 单篇文章JS模拟分页

    废话部分 前两天做了一个前台分页插件,支持ajax读取数据绑定前台 和 url带页码参数跳转两种方式.于是稍加改动,做了一个单篇文章js模拟分页的代码,为什么说是模拟分页呢?因为在服务器响应HTML请 ...

随机推荐

  1. Redis 在线管理工具（phpRedisAdmin）介绍 两次git

    phpRedisAdmin is a simple web interface to manage Redis databases. phpRedisAdmin 在 Redis clients 的列表 ...

  2. SCCM2012 R2实战系列之十二：解决OSD分发时间过长的问题

    对于SCCM 2012 R2的初学者来说,能够成功分发操作系统可能已经是非常兴奋了.但在企业中会遇到客户提出的各种各样苛刻的需求.所以在平时实验过程中多站点客户的角度想问题,尽可能的贴近企业实际生产环 ...

  3. 6行代码解决golang TCP粘包

    转自:https://studygolang.com/articles/12483 什么是TCP粘包问题以及为什么会产生TCP粘包,本文不加讨论.本文使用golang的bufio.Scanner来实现 ...

  4. [UE4]C++实现动态加载的问题：LoadClass<T>()和LoadObject<T>() 及 静态加载问题：ConstructorHelpers::FClassFinder()和FObjectFinder()

    转自:http://aigo.iteye.com/blog/2281558 动态加载UObject和动态加载UClass分别用LoadObject<T>(),和LoadClass<T ...

  5. 绘制字母和数字组合的验证码（原生php）

    <?php $font = array('font/FZZQJW.TTF','font/STHUPO.TTF');//字体 $str = '689acdefhjkmnpqrtuvwxyACDEF ...

  6. MYSQL存储过程中 使用变量 做表名

    ); DECLARE temp2 int; set temp1=m_tableName; set temp2=m_maxCount; set @sqlStr=CONCAT('select * from ...

  7. JVM总结-虚拟机加载类

    从 class 文件到内存中的类,按先后顺序需要经过加载.链接以及初始化三大步骤.其中,链接过程中同样需要验证:而内存中的类没有经过初始化,同样不能使用.那么,是否所有的 Java 类都需要经过这几步 ...

  8. 带约束的粒子群优化算法C++实现

    2018年1月份给师姐做的一个小项目,本来不打算写的,因为论文还没发表,涉及查重等乱七八糟的问题.... 感觉现在不写,以后应该来不及了,因为已经在实习岗位了.... 不做过多介绍,只做大概的描述,我 ...

  9. 事件冒泡及事件委托的理解（JQuery Dom操作）

    jQuery事件冒泡: click mouseenter 等事件没有绑定 也会触发,只是触发后没有任何结果 子元素触发事件后,会把触发事件传递给父元素,那么父元素也会被触发. 不管有没有绑定事件,都会 ...

  10. python中的popitem

    popitem()随机删除字典中的任意键值对,并返回到元组中 1 a = { 2 "name":"dlrb", 3 "age":25, 4 ...