在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实现页面打印自动分页的更多相关文章

  1. 关于页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题

    需求 最近在做博客的目录功能,发现一个在现代浏览器间的一个bug,或是称之为差异,即页面滚动值(scrollTop)的获取与设定. 在此之前先说一下关于页面元素的坐标获取,这张图的经典性不必再提. 实 ...

  2. ie、firefox、chrome中关于style="display:block" 引发的页面布局错乱的解决办法

    ie.firefox.chrome中关于style="display:block" 引发的页面布局错乱的解决办法: table中tr 添加style="display:b ...

  3. 禁止选中页面内容-兼容ie、firefox、chrome

    使用js禁止用户选中网页上的内容,IE及Chrome下的方法一样.使用onselectstart, 比如: 在body中加入<body onselectstart="return fa ...

  4. win7下firefox和chrome升级到最新版之后页面打不开的解决办法

    一.升级firefox到最新版后,页面崩溃,打开是空白页,连选项设置都打不开了. 最开始是我的firefox很久没升级,最近要要开始做开发,于是最让它自动升级.等升级到最新版本后,打开浏览器是结果显示 ...

  5. JS页面打印,预览,设置,分页

    一)在HTML页中加载打印对象 <object id="WebBrowser" width="0" height="0" classi ...

  6. [Python爬虫] Selenium自动访问Firefox和Chrome并实现搜索截图

    前两篇文章介绍了安装,此篇文章算是一个简单的进阶应用吧!它是在Windows下通过Selenium+Python实现自动访问Firefox和Chrome并实现搜索截图的功能.        [Pyth ...

  7. 开源的javascript实现页面打印功能,兼容所有的浏览器(情况属实)

    这篇文章完全是属于技术文章,也是记录一下自己在项目当中遇到的坑爹问题啊,因为是B/S的程序,所以打印功能还是必须要有的,对于打印我选择了一个js插件,发现非常的简单和方便,所以这里拿出来和大家分享一下 ...

  8. Selenium+Python:下载文件(Firefox 和 Chrome)

    引自  https://blog.csdn.net/Momorrine/article/details/79794146 1.      环境 操作系统 Win10 IDE Eclipse (Oxyg ...

  9. (二)Fiddler抓取Firefox、Chrome浏览器上的https协议

    Fiddler抓取Firefox.Chrome浏览器上的https协议 安装Fiddler后默认只抓取http协议,如果是https协议的话,浏览器就会提示"您的链接并不安全". ...

随机推荐

  1. ios - UINavigationBar添加背景图片的几种简单思路

    UITabBarController下面常常需要为多个ViewController设置导航栏样式,总结了一下遇到过的为UINavigationBar添加背景图片的几种简单思路 以设置背景图片为例: 第 ...

  2. FTP(File Transfer Protocol)是什么?

    文件传输协议 FTP(File Transfer Protocol),是文件传输协议的简称.用于Internet上的控制文件的双向传输.同时,它也是一个应用程序(Application).用户可以通过 ...

  3. CodeForces 450A 队列

    Description There are n children in Jzzhu's school. Jzzhu is going to give some candies to them. Let ...

  4. tomcat启动不起来,不知原因,没有报错日志,控制台一闪而过 怎么办

    在startup.bat文件中 编辑,在最后一行回车 加上一个词pause,暂停,然后再启动就看见控制台的错误信息啦,然后就自己解决吧

  5. 网页或WEB应用或PC端浏览器调用百度地图API

    今天在写微网页中遇见了调用百度地图这个问题:在一个容器中显示地图信息如图(设计图截图) 然后在网上查了接口:http://api.map.baidu.com/,就是这个东东,当然不止这个,还有几个必选 ...

  6. 【BZOJ2770】YY的Treap 结论+线段树

    [BZOJ2770]YY的Treap Description 志向远大的YY小朋友在学完快速排序之后决定学习平衡树,左思右想再加上SY的教唆,YY决定学习Treap.友爱教教父SY如砍瓜切菜般教会了Y ...

  7. A - 士兵队列训练问题

    A - 士兵队列训练问题 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit ...

  8. Chart控件文档

    假设c1Chart1为Chart控件的一个实例. 一.基本框架图 二.主要外层属性(即this.c1Chart1的主要属性) 1.Header和Footer,上标题和下标题.位于this.c1Char ...

  9. 通过spring boot提供restful api

    1 将返回设置为produces = "application/json" 返回给客户端json格式的response. 2 对各种异常的处理 各种异常如何返回给客户端? 各种异常 ...

  10. Centos中查询目录中内容命名ls(六)

    首先解释下这块, root代表当前登录用户,localhost代表主机名, ~代表当前主机目录,#代表用户权限 #表示超级用户,$表示普通用户: 查询目录中内容命令 ls  (list缩写) 格式 l ...