在调用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. UE4中多种颜色轮廓线的后期处理

    转自:http://blog.csdn.net/pizi0475/article/details/50396277 随着近来虚幻引擎4的一些变化,渲染多种颜色的轮廓线已经可以实现了!通过自定义模板,类 ...

  2. 俞敏洪：我创业24年感悟的3条CEO守则

    转自:http://www.gamelook.com.cn/2017/10/306603 创业24年,他的创业经历被拍成了电影.在一次小范围聚会时,他说现实远比剧本要精彩.“如果让我一切从头开始,我会 ...

  3. spark streaming插入hbase

    import java.sql.{DriverManager, ResultSet} import org.apache.spark._ import org.apache.spark.streami ...

  4. ZooKeeper系列（6）:ZooKeeper机制架构

    一.ZooKeeper权限管理机制 1.1 权限管理ACL(Access Control List) ZooKeeper 的权限管理亦即ACL 控制功能,使用ACL来对Znode进行访问控制.ACL的 ...

  5. 【Unix网络编程】chapter8基本UDP套接字编程

    chapter8基本UDP套接字编程 8.1 概述 典型的UDP客户端/服务端的函数调用 8.2 recvfrom和sendto函数 #include <sys/socket.h> ssi ...

  6. HDFS分布式文件系统

    hadoop致力于构建在廉价的商用服务器上 多副本存储策略(副本数存多少合适) 常见是数据访问方式:流式数据访问(更适合大数据的访问)    随机数据访问(更适合传统的关系型数据库的访问)

  7. 发送短信验证码倒计时，CountDownTimer；

    1.声明CountDownTimer的成员变量: private CountDownTimer countDownTimer; 2.设置倒计时总时间和间隔时间: countDownTimer = ne ...

  8. Android WebView无法播放视频或直播，关闭界面后任在播放的问题；

    1.设置webview属性: webView.setWebChromeClient(new MyWebChromeClient());         webSettings = webView.ge ...

  9. 洛谷 P1823 音乐会的等待

    题目描述 N个人正在排队进入一个音乐会.人们等得很无聊,于是他们开始转来转去,想在队伍里寻找自己的熟人.队列中任意两个人A和B,如果他们是相邻或他们之间没有人比A或B高,那么他们是可以互相看得见的. ...

  10. Spring配置,事务使用

    1.spring redis session超时配置 <bean class="org.springframework.session.data.redis.config.annota ...