firefox和chrome实现页面打印自动分页
在Firefox和chrome中直接调用打印功能的js方法是
window.print();
但是如果页面很长,那么就需要分页,这时只需要在页面中添加css属性即可,如果想自动分页,则如下所示
<style type="text/css" media="print">
div {
page-break-after:auto;
page-break-inside:auto;
page-break-before:auto;
}
</style>
这里的三个属性可以根据需要添加。
需要注意的是,在Firefox和chrome中,如果想实现打印可以自动分页,不要使用table来组织页面,两个浏览器对于用table组织的页面没有很好的支持自动分页,需要使用div,如果有表格,可以把表格包含在div中,也会自动分页打印。
如果没有可以添加css,例如
<style type="text/css" media="print">
table {
page-break-after:auto;
page-break-inside:auto;
page-break-before:auto;
}
tr {
page-break-after:auto;
page-break-inside:auto;
page-break-before:auto;
}
</style>
最后,可以把需要打印的内容单独成立一页,添加上一个打印按钮使用css控制该按钮不会被打印出来:
<style media="print">
.Noprint {display:none;}
</style> <table id="printCtrl" class="Noprint">
<tbody>
<tr>
<td align="center">
<input id="printBtn" type="button" onclick="print()" value="打印">
<br>
<hr align="center" width="90%" size="1" noshade="">
</td>
</tr>
</tbody>
</table>
后面可以添加上需要打印的内容即可
firefox和chrome实现页面打印自动分页的更多相关文章
- 关于页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
需求 最近在做博客的目录功能,发现一个在现代浏览器间的一个bug,或是称之为差异,即页面滚动值(scrollTop)的获取与设定. 在此之前先说一下关于页面元素的坐标获取,这张图的经典性不必再提. 实 ...
- ie、firefox、chrome中关于style="display:block" 引发的页面布局错乱的解决办法
ie.firefox.chrome中关于style="display:block" 引发的页面布局错乱的解决办法: table中tr 添加style="display:b ...
- 禁止选中页面内容-兼容ie、firefox、chrome
使用js禁止用户选中网页上的内容,IE及Chrome下的方法一样.使用onselectstart, 比如: 在body中加入<body onselectstart="return fa ...
- win7下firefox和chrome升级到最新版之后页面打不开的解决办法
一.升级firefox到最新版后,页面崩溃,打开是空白页,连选项设置都打不开了. 最开始是我的firefox很久没升级,最近要要开始做开发,于是最让它自动升级.等升级到最新版本后,打开浏览器是结果显示 ...
- JS页面打印,预览,设置,分页
一)在HTML页中加载打印对象 <object id="WebBrowser" width="0" height="0" classi ...
- [Python爬虫] Selenium自动访问Firefox和Chrome并实现搜索截图
前两篇文章介绍了安装,此篇文章算是一个简单的进阶应用吧!它是在Windows下通过Selenium+Python实现自动访问Firefox和Chrome并实现搜索截图的功能. [Pyth ...
- 开源的javascript实现页面打印功能,兼容所有的浏览器(情况属实)
这篇文章完全是属于技术文章,也是记录一下自己在项目当中遇到的坑爹问题啊,因为是B/S的程序,所以打印功能还是必须要有的,对于打印我选择了一个js插件,发现非常的简单和方便,所以这里拿出来和大家分享一下 ...
- Selenium+Python:下载文件(Firefox 和 Chrome)
引自 https://blog.csdn.net/Momorrine/article/details/79794146 1. 环境 操作系统 Win10 IDE Eclipse (Oxyg ...
- (二)Fiddler抓取Firefox、Chrome浏览器上的https协议
Fiddler抓取Firefox.Chrome浏览器上的https协议 安装Fiddler后默认只抓取http协议,如果是https协议的话,浏览器就会提示"您的链接并不安全". ...
随机推荐
- day6笔记
一.上节回顾 list:li = [1,2,3,5,'a']增加:append:末尾加入==追加 insert:插入,在任意位置,insert(index,'内容') extend:迭代着加入,'as ...
- Java StuNote 1
1. JAVA语言历史 无心插柳柳成荫,有心栽花花不开. JAVA由SUN Microsystem公司研发. 2. JAVA语言特点 a) 跨平台.一次编译.到处执行. b) 速度慢.但非常稳定, 没 ...
- convex hull trick CF344.E
类似于斜率优化的东西,果真CF的E以后才会考点算法啊. 感觉这种优化应该很常见,但这题直线只有第一象限的,但是插入,和查找操作是不变的,按极角排序后就可以直接用这个模板了. #include < ...
- 【BZOJ1280】Emmy卖猪pigs 最大流
[BZOJ1280]Emmy卖猪pigs Description Emmy在一个养猪场工作.这个养猪场有M个锁着的猪圈,但Emmy并没有钥匙.顾客会到养猪场来买猪,一个接着一个.每一位顾客都会有一些猪 ...
- php学习笔记8--半边引号引发的问题
前段时间重装了系统,后来说是又要用php,就重新搭建了apache+php+mysql的环境,由于之前搭建过好多次,感觉很easy,很快就搭建完成,然后写了下面的常用的测试环境的代码: <?ph ...
- Null和Undefined类型
Null和Undefined类型都只有唯一的特殊值,即null和undefined.不过null是关键字而undefined不是. JavaScript把两者定义为相等的,如下代码可以验证: aler ...
- 搭建Spring所需的各类jar包汇总详解
Spring jar包官网下载地址:http://repo.spring.io/release/org/springframework/spring/ Spring jar包的描述:针对3.2.2以上 ...
- 洛谷 P4819 [中山市选]杀人游戏
洛谷 题目就是让我们在DAG中找到一些点,覆盖所有点. 因为是DAG,可以想到tarjan缩一下点.假设我们需要找x个点,那么答案就是(n-x)/n. 我们怎么选点呢? 敏锐的我们很快就能想到,直接选 ...
- hbase shell编码显示中文
最近测试hbase shell,碰到个中文显示编码问题,最后通过Python解决了问题,具体操作如下: hbase(main):015:0* scan 'fr_test_hbase:test_log1 ...
- 011-git-将tag推送到远端
1.将tag推送到远端 在使用TortoiseGit过程中,push推送过程中,选择include tag,远端就有次分支.