在调用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. AnimationDrawable写贞动画，播放完毕停止在第一或最后一帧

    animation.stop();animation.selectDrawable(0);//只需要在停止的时候,设置下标为你想要的一帧就好了

  2. 移动端动态font-size

    /** * Created by shimin on 2017/8/18. *///计算dpr!function(win, lib) { var timer, doc = win.document, ...

  3. BCGcontrolBar(二) 改变RIBBON字体

    在xp系统下 BCGcontrolBar字体会发虚 这时候重新设置下字体就行了 在单文档的MainFram的onCreate中加入 CFont *font=m_wndRibbonBar.GetFont ...

  4. 安装 dubbo

    Dubbo的介绍: 是一个java版的RPC框架,由阿里巴巴开发并使用,结合zookeeper,实现流动计算架构完成资源调度和治理的工作 dubbo管控台可以对注册到zookeeper注册中心的服务或 ...

  5. Delphi7 中文汉字转网址格式 Utf8编码转换（淘宝搜索中文转网址）

    function HttpEncode(S:AnsiString):string; var   P:^Byte;   I:Cardinal; begin   Result:='';   P:=@S[1 ...

  6. (转)深入sql server中的事务

    原文地址:http://www.cnblogs.com/chnking/archive/2007/05/27/761209.html 参考文章:http://www.cnblogs.com/zhuif ...

  7. （转）C#.NET WINFORM应用程序中控制应用程序只启动一次

    原文地址 :http://www.cnblogs.com/emanlee/archive/2009/08/31/1557379.html using System; using System.Thre ...

  8. NIO读写文件并加锁

    一.读取文件 package lock; import java.io.File; import java.io.FileNotFoundException; import java.io.IOExc ...

  9. nodejs运行的两种方式<小记>

    在mac上: 1.方式一:使用IDE运行 配置需要运行的js文件: 配置并运行 ①配置运行的js文件和运行的文件不一致时会导致报错.如图备注 ②当运行另一个文件提示端口8080被占用 ,需要改为其他端 ...

  10. Spring Security数据库管理

    要实现数据库管理用户角色及权限,需要自定义用户登录功能,Spring Security已经为我们提供了接口UserDetailService.需要以下表: 用户表 角色表 权限表 用户角色关系表 权限 ...