打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
extjs 组件打印 问题
描述一下大概功能需求:从Ext的GridPanel中选择一条记录,将这条记录的详细信息呈现在Ext的Window当中,将Window中呈现的数据按其格式用打印机打印出来。

要处理这个有两种方式:
1.在前台用JavaScript调用打印机打印
2.在后台服务器端处理
由于需求的原因,这里只允许使用第一种方式。想来应该也不难,JavaScript调用一下window.print()(注意:不是Ext.Window),结果失败了。window.print()打印出来的是整个当前浏览器中所呈现的内容,而不是我所要的Ext.Window中的内容。
(突然在想为什么不让每个dom都有print()方法去打印自身中的内容呢?郁闷…)
既然只能打印浏览器window中的,那我把Ext.Window中要打印的内容赋给浏览器的window,不就可以打印了么。
于是乎开始coding…

var win = new Ext.Window({   title: '明细',  width: 600,  height: 400,  buttons: [{    text: '打印',    handler: function(){      //把当前的页面存起来      var c = window.document.body.innerHTML;      //把win中要打印的内容赋给当前浏览器      window.document.body.innerHTML = win.body.dom.innerHTML;      //开始打印      window.print();      //再转回去      window.document.body.innerHTML = c;    }  }]});

先不说打印是否成功,由于整个项目是Ext做的,这样一来回折腾,整个页面直接变成只能看不能操作了,晕倒~再想办法吧。
coding…

var win = window.open('','printer', '');win.document.body.innerHTML = win.body.dom.innerHTML;win.print();

没问题,可是弹出来了一个窗口,我想能不能把它隐藏起来呢,可是突然又想到弹窗会被某些浏览器拦截,这个方法也放弃。
还有什么办法呢?再次突然想起frame与frame之间如何用JavaScript传值,一个frame中含有一个window对象,那么…
接着coding…

var win = new Ext.Window({   title: '明细',  width: 600,  height: 400,  html: '<iframe />',  buttons: [{    text: '打印',    handler: function(){      var c = win.body.first().dom.innerHTML;      var printer = win.body.last().dom.contentWindow;      printer.document.body.innerHTML = c;      printer.print();    }  }]});

在Ext.Window中用html配置选项创建一个空iframe标签,在Firebug下可以看到html所配置的内容会出现在win.body中且位于最后,win.body是Ext.Element对象,通过它可以取到要打印的内容c和打印机printer(frame中的window),然后赋值,接着打印。
想的好好的,打印出来的竟然和第一个方式一样,⊙﹏⊙b汗
问题出在哪了?难道因为iframe没有获得焦点?printer.print()之前加上printer.focus(),再打印一张出来,搞定!同理也可以打印Ext.Panel等。

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
window.print打印指定div实例代码
window.print()实现分页打印
事件冒泡与事件捕获及事件委托
一周一话题之四(JavaScript、Dom、jQuery全面复习总结<Dom篇>)
详解JavaScript DOM中的Node节点
Javascript 在浏览器环境中 (四) DOM节点的创建,修改与删除
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服