JS 实现分页打印
在调用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 实现分页打印的更多相关文章
- js控制分页打印、打印分页示例
1 打印分页 需要添加一段代码 <div style="page-break-before:always;"><br /></div> 2 & ...
- js实现网页打印分页打印
web打印思路:html页面本身带有打印功能window.print() 但是在打印时又不能word模板的要求来打印不能满足打印需求.同时我们打印的数据有时候是动态变化的需要按模板来打印我的处理方式是 ...
- JS重构分页
JS重构分页 很早以前写过一个Jquery分页组件,但是当时写的组件有个缺点,当时的JS插件是这样设计的:比如:点击 --> 查询按钮 ---> 发ajax请求 返回总页数和所有数据, ...
- C#设计模式总结 C#设计模式(22)——访问者模式（Vistor Pattern） C#设计模式总结 .NET Core launch.json 简介 利用Bootstrap Paginator插件和knockout.js完成分页功能 图片在线裁剪和图片上传总结 循序渐进学.Net Core Web Api开发系列【2】：利用Swagger调试WebApi
C#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...
- 使用ScriptX控件实现IE浏览器分页打印功能
之前讲过js调用ie浏览器自带打印的用法,今天讲使用插件的方式.浏览器自带打印不能控制页边距.页眉页脚等选项,尤其是如果分页打印的话,无法自动将前一页标题带到本页,所以不适用多页打印的功能.使用Scr ...
- 原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）
虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...
- 原生JS实现分页效果1.0
不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...
- 纯js实现分页
原理:所有数据已加载好,js通过遍历部分显示,实现分页效果 html代码 <html> <head> <meta charset='utf-8'> <scri ...
- 单篇文章JS模拟分页
废话部分 前两天做了一个前台分页插件,支持ajax读取数据绑定前台 和 url带页码参数跳转两种方式.于是稍加改动,做了一个单篇文章js模拟分页的代码,为什么说是模拟分页呢?因为在服务器响应HTML请 ...
随机推荐
- 2012 - AD GC全局编录服务器(Global Catalog)
普通域控制器只记录本域对象的信息,而GC全局编录服务器则不仅记录本域所有对象的只读信息,还记录林中所有其他域中部分域对象的只读信息. GC全局编录服务器作用: 1,存储对象信息副本,提高搜索性能: ...
- Linux CentOS更改文件的权限
chgrp (全称:change group) groupadd testgroup 添加用户组 chgrp testgroup test1 修改文件的所属用户组是testgroup. 如果test ...
- JDBC连接数据库，结合DbUtil数据库连接工具类的使用
(以Mysql数据库为例) 第一步:在项目里配置数据库驱动 Build Path->configure Build Path ->Add Exteral JARs 将JDBC驱动包导 ...
- 第1章 计算机网络和协议（2）_OSI参考模型
2. OSI参考模型 2.1 OSI参考模型详解 (1)参考模型的优点 ①将网络的通信过程划分为小一些.功能简单的部件,有助于各个部件开发.设计和故障排除. ②通过网络组件的标准化,允许多个供应商进行 ...
- Apache CLI Demo
1. Options private Options options = new Options(); 2. option (1) way1 launcher.options.addOption(&q ...
- 数组转换成json key-value形式
eg1(数组中包含的是数组): var jsonData = {}; var arr = [[1, 'boy', 'dabing'], [2, 'girl', 'dabing']]; for (var ...
- 3-安装hive
1.解压.修改权限 tar -zvxf apache-hive-1.2.1-bin.tar.gz -C /opt/app/ sudo chown -R hadoop:hadoop /opt/app/a ...
- Linux 安装redis 基本配置 发布订阅,安全配置,持久化 rdb ,aof
redis redis相关配置1.yum 源码 rpm yum 快速,间接,高效,解决依赖关系,(自动安装到某个路径,不可控),通过yum安装的软件查询命令 rpm -ql nginx yum源 ...
- WPF 获取文件夹路径，目录路径，复制文件，选择下载文件夹/目录
private void Border_MouseLeftButtonUp_4(object sender, MouseButtonEventArgs e) { //获取项目中文件 , System. ...
- .NET C#获取当前网页地址
摘自:https://www.cnblogs.com/vichin/p/6004249.html 设当前页完整地址是:http://www.jb51.net/aaa/bbb.aspx?id=5& ...