利用JQuery在网页上打印PDF
2016-03-21 15:45
295 查看
项目需求是这样的,在HTML网页上点击打印,然后弹出chrome打印窗口,窗口中是后台生成的PDF文件。其中PDF文件是由后台servlet生成的。
第一种想法是,点击打印时,弹出一个新的窗口
在这个新的页面中有PDF文件的内容,而且网页上也刚刚有打印的功能,这种看起来是最简单的,但是对用户而言,需要点击二次按钮才能真正打印。所以,用户体验不会太好。
第二种想法是利用iframe,将PDF文件的内容包含其中,这个时候调用window.print()来弹出打印窗口。
一般的用法是使用window.print()方法来打印,但是当调用window.print()方法时将会显示的是网页正文的内容,而不是iframe的过程,有的网友说把网页的focus置为iframe即可,但是我调研了半天没找到一个好方法。
于是我想window只是一个对象,那么如果我能获取到iframe的window对象不就可以了?于是用了contentWindow的方法,果然好使。
这种方法看起来会更清爽一些,然后用户体验也还行。
第一种想法是,点击打印时,弹出一个新的窗口
window.open(url,"_blank");//url为生成PDF的url
在这个新的页面中有PDF文件的内容,而且网页上也刚刚有打印的功能,这种看起来是最简单的,但是对用户而言,需要点击二次按钮才能真正打印。所以,用户体验不会太好。
第二种想法是利用iframe,将PDF文件的内容包含其中,这个时候调用window.print()来弹出打印窗口。
//创建一个空的iframe,因为如果每次请求都生成PDF,那么是不必要的。 <iframe style="display:none" id="printIframe"></iframe> $(document).ready(function(){ .... $("#printIframe").load(function(){//等待iframe加载完成后再执行doPrint.每次iframe设置src之后都会重新执行这部分代码。 doPrint(); }); .... }); //点击打印按钮,触发事件】 function printPDF(){ var src = $("#printIframe").attr("src"); if(!src){//当src为空,即第一次加载时才赋值,如果是需要动态生成的话,那么条件要稍稍变化一下 $("#printIframe").attr("src","./attachment/Images.pdf");//暂时静态PDF文件 }else doPrint(); } function doPrint(){ $("#printIframe")[0].contentWindow.print(); }
一般的用法是使用window.print()方法来打印,但是当调用window.print()方法时将会显示的是网页正文的内容,而不是iframe的过程,有的网友说把网页的focus置为iframe即可,但是我调研了半天没找到一个好方法。
于是我想window只是一个对象,那么如果我能获取到iframe的window对象不就可以了?于是用了contentWindow的方法,果然好使。
这种方法看起来会更清爽一些,然后用户体验也还行。
相关文章推荐
- jquery autocomplete控件对比
- jQuery 表格插件25
- jquery实现表格可变列宽插件开发
- jQuery事件
- 回到顶部功能实现
- jquery下的this,$(this),$(this).get(0);
- Web 开发中很实用的10个效果和各种jQuery插件
- CSS3+jQuery鼠标跟随图片悬停效果 零玖玖教育
- jquery on()方法
- jquery中使用get实现局部刷新
- jquery跳转
- Hbuilder jQuery 自定义代码块
- Jquery调用webService的四种方法
- jquery-zclip插件
- JQuery 引发两次$(document.ready)事件
- jquery点击页面链接页面淡入淡出效果
- 使用jquery获取父元素或父节点的方法
- Jquery 操作iframe中元素
- Jquery 选择器(:last-child)详解
- JQuery Animate函数实现透明度和位置渐变的实例