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请 ...
随机推荐
- noteforjs
轻量高效的开源JavaScript插件和库---<!-- TOC --> - [图片](#图片)- [布局](#布局)- [轮播图](#轮播图)- [弹出层](#弹出层)- [音频视频]( ...
- vs code编辑器格式化react jsx插件
vs code格式化jsx比较适合的插件是react-beautify: 格式化中遇到的问题是indent几格,这个问题的解决是你在space里设置几格这个插件就会自动格式化出几格.
- MySQL存储过程 事务transaction
MySQL 中,单个 Store Procedure(SP) 不是原子操作,而 Oracle 则是原子的.如下的存储过程,即使语句2 失败,语句 1 仍然会被 commit 到数据库中: create ...
- CM+CDH大数据平台
我这里搭建的是3节点,centos6.5的静态ip ,ssh免密码登录,防火墙关闭,时钟同步等等一些准备工作我这里就不多说了 我们可以进官网看看 https://www.cloudera.com/ 我 ...
- ORACLE和MYSQL的简单区别
1,Oracle没有offet,limit,在mysql中我们用它们来控制显示的行数,最多的是分页了.oracle要分页的话,要换成rownum. 2,oracle建表时,没有auto_increme ...
- 04-spark streaming
1.基本概念(了解) ①流(Streaming): 是一种数据传送技术,它把客户机收到的数据变成一个稳定连续的流,源源不断地送出,使用户听到的声音或看到的图象十分平稳, 而且用户在整个文件送完之前就可 ...
- ORACLE ROWNUM解析[转]
一.对rownum的说明 关于Oracle 的 rownum 问题,很多资料都说不支持SQL语句中的“>.>=.=.between...and”运算符,只能用如下运算符号“<.< ...
- Git工作流基础简介【与产品经理.jpg】
基于可视化界面的操作可使用Sourcetree这个软件进行操作. 下面将描绘的几个命令主要是 git init git add git commit git status git reset HEAD ...
- 《GPU高性能编程CUDA实战》第三章 CUDA设备相关
▶ 这章介绍了与CUDA设备相关的参数,并给出了了若干用于查询参数的函数. ● 代码(已合并) #include <stdio.h> #include "cuda_runtime ...
- 05python上
location 位置 untitled 未命名的 fullstack 全栈 interpreter 解释器 字符格式化输出 占位符 %s s = string %d d = digit 整数 %f ...