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 相关文章推荐
js 对小数加法精度处理示例说明
Dec 27 Javascript
js查找某元素中的所有图片地址的方法
Jan 16 Javascript
JavaScript实现页面跳转的几种常用方式
Nov 28 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
Jan 19 Javascript
JS实现HTML标签转义及反转义
Apr 14 Javascript
JS查找英文文章中出现频率最高的单词
Mar 20 Javascript
详解如何使用webpack打包Vue工程
May 27 Javascript
bmob js-sdk 在vue中的使用教程
Jan 21 Javascript
node.js域名解析实现方法详解
Nov 05 Javascript
vue实现登录拦截
Jun 29 Javascript
JavaScript经典案例之简易计算器
Aug 24 Javascript
JavaScript实现班级抽签小程序
May 19 Javascript
使用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
Search Engine Friendly的URL设计
2006/10/09 PHP
PHP中你应该知道的require()文件包含的正确用法
2015/06/12 PHP
HTML中嵌入PHP的简单方法
2016/02/16 PHP
PHP new static 和 new self详解
2017/02/19 PHP
基于php双引号中访问数组元素报错的解决方法
2018/02/01 PHP
用于节点操作的API,颠覆原生操作HTML DOM节点的API
2010/12/11 Javascript
JavaScript中的全局对象介绍
2015/01/01 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
2015/08/21 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
2016/01/29 Javascript
JS Attribute属性操作详解
2016/05/19 Javascript
基于Vue.js实现数字拼图游戏
2016/08/02 Javascript
JS简单去除数组中重复项的方法
2016/09/13 Javascript
JS中位置与大小的获取方法
2016/11/22 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
2017/09/07 jQuery
原生JS封装animate运动框架的实例
2017/10/12 Javascript
浅析JavaScript中的特殊数据类型
2017/12/15 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
2018/09/21 Javascript
微信小程序实现的日期午别医生排班表功能示例
2019/01/09 Javascript
Vue的Options用法说明
2020/08/14 Javascript
python切换hosts文件代码示例
2013/12/31 Python
python数据结构之二叉树的遍历实例
2014/04/29 Python
python爬虫实例详解
2018/06/19 Python
python获取微信小程序手机号并绑定遇到的坑
2018/11/19 Python
详解Python3中ceil()函数用法
2019/02/19 Python
Python函数式编程指南:对生成器全面讲解
2019/11/19 Python
Python自定义聚合函数merge与transform区别详解
2020/05/26 Python
利用CSS3实现文字折纸效果实例代码
2018/07/10 HTML / CSS
整理HTML5移动端开发的常用触摸事件
2016/04/15 HTML / CSS
《赠汪伦》教学反思
2014/04/12 职场文书
让生命充满爱演讲稿
2014/05/10 职场文书
环保标语口号
2014/06/13 职场文书
工伤事故赔偿协议书
2014/10/27 职场文书
史上最牛的辞职信
2015/02/28 职场文书
当幸福来敲门观后感
2015/06/01 职场文书
单位接收证明格式
2015/06/18 职场文书
Nginx配置https原理及实现过程详解
2021/03/31 Servers