JS 实现分页打印功能


Posted in Javascript onMay 16, 2018

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

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

page-break-beforepage-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 实现分页打印功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 学习 - 提高篇
Feb 02 Javascript
jquery 弹出登录窗口实现代码
Dec 24 Javascript
基于jquery的jqDnR拖拽溢出的修改
Feb 12 Javascript
javascript完美拖拽的实现方法
Sep 29 Javascript
javascript搜索框效果实现方法
May 14 Javascript
jquery控制表单输入框显示默认值的方法
May 22 Javascript
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
JavaScript设计模式之观察者模式实例详解
Jan 16 Javascript
浅谈Vue中render中的h箭头函数
Nov 07 Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 Javascript
JS实现图片幻灯片效果代码实例
May 21 Javascript
vue+vant实现购物车全选和反选功能
Nov 17 Vue.js
使用vue-cli导入Element UI组件的方法
May 16 #Javascript
JS 使用 window对象的print方法实现分页打印功能
May 16 #Javascript
Koa2微信公众号开发之消息管理
May 16 #Javascript
js实现鼠标单击Tab表单切换效果
May 16 #Javascript
Koa2微信公众号开发之本地开发调试环境搭建
May 16 #Javascript
解决Mac下安装nmp的淘宝镜像失败问题
May 16 #Javascript
为什么使用koa2搭建微信第三方公众平台的原因
May 16 #Javascript
You might like
十天学会php(3)
2006/10/09 PHP
简单的用PHP编写的导航条程序
2006/10/09 PHP
php中unlink()、mkdir()、rmdir()等方法的使用介绍
2012/12/21 PHP
ThinkPHP水印功能实现修复PNG透明水印并增加JPEG图片质量可调整
2014/11/05 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
js获取当前select 元素值的代码
2010/04/19 Javascript
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
document.all的一个比较完整的总结及案例
2013/01/31 Javascript
JavaScript及jquey实现多个数组的合并操作
2014/09/06 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
2016/08/05 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
2017/07/27 Javascript
原生JS上传大文件显示进度条 php上传文件代码
2020/03/27 Javascript
JS中的事件委托实例浅析
2018/03/22 Javascript
微信小程序后台持续定位功能使用详解
2019/08/23 Javascript
js根据后缀判断文件文件类型的代码
2020/05/09 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
2020/11/16 Javascript
Python实现利用最大公约数求三个正整数的最小公倍数示例
2017/09/30 Python
对Django中内置的User模型实例详解
2019/08/16 Python
Python实现手机号自动判断男女性别(实例解析)
2019/12/22 Python
使用python实现微信小程序自动签到功能
2020/04/27 Python
Python3.9最新版下载与安装图文教程详解(Windows系统为例)
2020/11/28 Python
HTML5边玩边学(1)画布实现方法
2010/09/21 HTML / CSS
跑步爱好者一站式服务网站:Jack Rabbit
2016/09/01 全球购物
澳大利亚当地最大的时装生产商:Cue
2018/08/06 全球购物
I.T集团香港官方商城:ITeSHOP.com Hong Kong
2019/02/15 全球购物
社区庆中秋节活动方案
2014/02/07 职场文书
品质标语大全
2014/06/21 职场文书
白酒营销策划方案
2014/08/17 职场文书
俞敏洪一分钟演讲稿
2014/08/26 职场文书
单位委托函范文
2015/01/29 职场文书
导师工作推荐信
2015/03/27 职场文书
麦田里的守望者读书笔记
2015/06/30 职场文书
大学同学聚会感言
2015/07/30 职场文书
聘任通知书
2015/09/21 职场文书
CSS3 Tab动画实例之背景切换动态效果
2021/08/23 HTML / CSS