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 相关文章推荐
jquery实现的鼠标拖动排序Li或Table
May 04 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
Oct 17 Javascript
js实现网页抽奖实例
Aug 05 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
Sep 08 Javascript
Bootstrap被封装的弹层
Jul 20 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
Bootstrop实现多级下拉菜单功能
Nov 24 Javascript
JavaScript代码执行的先后顺序问题
Oct 29 Javascript
基于滚动条位置判断的简单实例
Dec 14 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
Apr 09 Javascript
vue实现同时设置多个倒计时
May 20 Vue.js
SSM VUE Axios详解
Oct 05 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
实现 win2003 下 mysql 数据库每天自动备份
2006/12/06 PHP
php实现ip白名单黑名单功能
2015/03/12 PHP
phplist及phpmailer(组合使用)通过gmail发送邮件的配置方法
2016/03/30 PHP
PHP 在数组中搜索给定的简单实例 array_search 函数
2016/06/13 PHP
PHP符合PSR编程规范的实例分享
2016/12/21 PHP
一款JavaScript压缩工具:X2JSCompactor
2007/06/13 Javascript
指定js可访问其它域名的cookie的方法
2007/09/18 Javascript
jquery实现简单的自动播放幻灯片效果
2015/06/13 Javascript
javascript日期格式化方法小结
2015/12/17 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
2017/06/04 Javascript
javascript数组拍平方法总结
2018/01/20 Javascript
详解Eslint 配置及规则说明
2018/09/10 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
2020/01/12 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
2020/04/07 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
2020/04/13 Javascript
javascript中layim之查找好友查找群组
2021/02/06 Javascript
编写Python脚本批量下载DesktopNexus壁纸的教程
2015/05/06 Python
python django 增删改查操作 数据库Mysql
2017/07/27 Python
matplotlib设置legend图例代码示例
2017/12/19 Python
Python数据类型之String字符串实例详解
2019/05/08 Python
pycharm创建scrapy项目教程及遇到的坑解析
2019/08/15 Python
python中有关时间日期格式转换问题
2019/12/25 Python
python获取依赖包和安装依赖包教程
2020/02/13 Python
一篇文章带你搞定Ubuntu中打开Pycharm总是卡顿崩溃
2020/11/02 Python
HTML5视频播放插件 video.js介绍
2018/09/29 HTML / CSS
松本清官方海外旗舰店:日本最大的药妆连锁店
2017/11/21 全球购物
瑞典在互联网上最大的宠物商店:Animail
2020/10/31 全球购物
Java程序员面试题
2013/07/15 面试题
单位办理社保介绍信
2014/01/10 职场文书
司机辞职报告范文
2014/01/20 职场文书
文员的职业生涯规划发展方向
2014/02/08 职场文书
行政人事专员岗位职责
2015/04/07 职场文书
实习报告范文
2019/07/30 职场文书
Tensorflow与RNN、双向LSTM等的踩坑记录及解决
2021/05/31 Python
SQL Server作业失败:无法确定所有者是否有服务器访问权限的解决方法
2021/06/30 SQL Server
解决redis批量删除key值的问题
2022/03/23 Redis