jqprint 分页打印_JS实现页面打印(整体、局部)
我们在网页开发过程中经常会有打印页面的需求,通过JS来实现的方法有很多,这里我做了一个整理,供大家参考。
方式一:window.print()
整体打印
1打印
现在就轻松实现了页面的打印,但是这种方式会将整个页面打印,如果想要实现指定区域的打印需要通过下面的设置
局部打印
首先,在html中,通过star和end来标记打印区域
1
2
3
4
5
6
7
8
这块内容不需要打印
这里是需要打印的内容
.....
这块内容不需要打印
然后,在点击事件中添加如下代码
1
2
3
4
5
6
7
8
9function doPrint() {
bdhtml=window.document.body.innerHTML;
sprnstr="";
eprnstr="";
prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));
window.document.body.innerHTML=prnhtml;
window.print();
}
过滤打印区域的内容
例如
1
2
3
4
5
6
7
8
预览
打印
这里是需要打印的内容
.....
上面的预览和打印按钮不希望打印,如果要过滤的话可以做下面的样式设置
1
2
3
4
5
6
7
@mediaprint {
.noprint{
display:none;
}
}
or
1
2
3
4
5
.noprint{
display:none;
}
两种写法任选其一
分页打印
使用 window.print() 打印时,如果内容超出会自动分页。但是我们如果需要自定义分页范围,如碰到表格分页打印,可以通过进行如下设置:
1
2
方式二、jqprint()
jqprint是一个基于jQuery编写的页面打印的一个小插件,但是不得不承认这个插件确实很厉害,最近的项目中帮了我的大忙,在Web打印的方面,前端的打印基本是靠window.print()的方式进行打印的,而这个插件在其基础上进行了进一步的封装,可以轻松实现打印网页上的某个区域,这是个亮点。
请注意!很多朋友遇到 Cannot read property 'opera' of undefined 错误问题是juqery版本兼容问题
解决方法:加入迁移辅助插件 jquery-migrate-1.0.0.js可解决版本问题
引入
1
2
js
1
2
3
4
5
function a(){
$("#ddd").jqprint();
}
html
1
2
3
4
5
6
7
8
9
10
11
12
test | test | test | test | test |
设置模板打印
1
2
3
4
5
6$("#printContainer").jqprint({
debug:false,//如果是true则可以显示iframe查看效果(iframe默认高和宽都很小,可以再源码中调大),默认是false
importCSS:true,//true表示引进原来的页面的css,默认是true。(如果是true,先会找$("link[media=print]"),若没有会去找$("link")中的css文件)
printContainer:true,//表示如果原来选择的对象必须被纳入打印(注意:设置为false可能会打破你的CSS规则)。
operaSupport:true//表示如果插件也必须支持歌opera浏览器,在这种情况下,它提供了建立一个临时的打印选项卡。默认是true
});
附言
另外还可以使用html 标签引入Webbrowser控件(只兼容IE)或者调用windows底层打印,报安全警告,不建议使用(不支持局部打印)
这里只介绍两种方式,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
如您对本文有所疑义或者有任何需求,请点击访问脚本社区,百万网友为您解惑!
原文链接:http://www.jianshu.com/p/40dfd2d6c344?utm_source=tuicool&utm_medium=referral
jqprint 分页打印_JS实现页面打印(整体、局部)相关推荐
- jqprint 分页打印_Jqprint实现页面打印
好些项目需要实现页面打印,特别是一些后台管理类系统,下面介绍一款轻量级的打印插件: 1.实现页面打印要引入jQuery和Jqprint.点击下载Jqprint插件 2.HTML代码: test tes ...
- JS怎么实现页面打印 JS实现页面打印的方法
JS实现页面打印 1.js实现(可实现局部打印) [html] <input id="btnPrint" type="button" value=&quo ...
- jqprint 分页打印_javascript如何实现打印页面?
我们在网页开发过程中经常会有打印页面的需求,通过JS来实现的方法有很多.下面本篇文章就来给大家介绍几种使用JavaScript打印页面的方法,希望对大家有所帮助. 方式一:window.print() ...
- 网页打印问题,打印设置,打印预览,打印分页,纵打,横打及页面的边距
1.控制"纵打". 横打"和"页面的边距 (1) <object id="factory" style="display ...
- 使用jqprint插件完成页面打印
使用jqprint插件完成页面打印 jqprint是一个基于jQuery编写的页面打印的一个小插件,但是不得不承认这个插件确实很厉害,最近的项目中帮了我的大忙,在Web打印的方面,前端的打印基本是靠w ...
- java实现分页打印功能_web 页面分页打印的实现
1.首先引入一个WebBrowser在需要打印的页面,可以直接添加: 复制代码 代码如下: 到页面,或者使用javascript在需要的时候临时添加也可以: 复制代码 代码如下: document.b ...
- vue-print-nb 实现页面打印(含分页打印)
Web 实现页面打印 安装 官网地址:https://github.com/Power-kxLee/vue3-print-nb // 安装 打印组件 npm install vue-print-nb ...
- 页面打印插件 jquery.jqprint.js 插件使用实例
页面打印插件 jquery.jqprint.js 插件使用实例 jquery.jqprint.js 插件下载 jqprint 是一个基于jQuery编写的页面打印的一个小插件,可以对页面指定元素的内容 ...
- js 页面打印,兼容单个打印和分页批量打印,自定义页眉和简单页脚
场景: 最近在公司做开发,有个需求需要页面打印功能,作为前端半桶水都不到,只会改页面的我,一脸懵逼,公司里也没人系统的做过,按照惯例,本着有事找度娘的心态(我一直认为我们现在遇到的70%-80%的问题 ...
最新文章
- 【MySQL笔记】mysql来源安装/配置步骤和支持中国gbk/gb2312编码配置
- java rxtx 64_java – RXTX无法在Windows 7 64位下列出或查找端口
- 画一个空心圆_用SolidWorks画一个空心挂钩,这种画法稍微有点麻烦
- camunda流程定义表无数据_[Python04] 学习snakemake,三步轻松搭建生信流程!
- git 提交遇到error:fail to push some refer to 远程地址(url)
- php 百度报表工具下载,PHP Report Maker12最新版
- 实用typescript_从今天开始,拿起 TypeScript 做一个轮子的制造者
- springboot中的controller注解没有生效
- 开关电源设计书籍推荐
- 大家好,我是谢公子,来自深信服—深蓝攻防实验室
- linux修改无线网卡hwaddr,在Linux下改无线网卡的mac的地址
- (JZ1619)2018.07.08【2018提高组】模拟C组 0	.音乐节拍
- 计算机的英语怎样写,电脑的英文作文怎么写好呢
- 如何用计算机做曲面图,#平面设计图#在电脑上怎么做设计图?
- flask----后续
- arcgis根据7参转坐标_ArcGIS和COORD进行坐标七参数转换国家2000的方法
- 解读一个有趣的网站seo,论网站如何快速上词以及上量
- python怎样遍历列表中数字_Python基础-列表操作(2):列表的遍历和数字列表
- 华为云防火墙-firewall 打开关闭
- MapXtreme 简单了解