打印Ext组件中的内容


描述一下大概功能需求:从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等

 

 

你可能感兴趣的:(打印Ext组件中的内容)