Question

请教panel中的打印问题（extjs）

tabpanel的tab1加了一个panel和一个button按钮，现在在panel中有一个jsp的文件，想通过button按钮实现打印的功能，网上找的window.print()的都是全部都打印了出来，现在只想打印想要打印的jsp页面出来。如果在点击打印后出现打印预览那是更好的，如果打印预览实现不了，只希望大神能帮忙实现打印的功能做的界面如下

Answer 1

假设你的jsp显示在id为printArea下的元素下，在页面里定义一个iframe，假设这iframe的id是printIframe。

在你的button的click事件里用下面的代码做：

var printArea = document.getElementById("printArea").innerHTML;
var iframe = document.getElementById("printIframe");
iframe.contentWindow.document.body.innerHTML=printArea;
iframe.contentWindow.focus();//IE will print parent window without this statement.
iframe.contentWindow.print();

追问

　　你好，我panel中的代码如下：

　　然后按你写的id改了之后拿进去，没效果出来呀

追答

不是这样的，你的panel直接写成

{
    xtype : 'panel',
    id : 'printArea'
}
这个panel的内容就是你的url返回的html。

然后在jsp里面随便一个地方写一个<iframe id="printIframe" style="width:0px;height:0px;position:absolute;left:-500px;top:-500px;"></iframe>。

这个iframe基本以后就通用了，只要打印的东西都可以先丢到这个iframe里面，然后打印这个iframe的内容。

原理就是在页面里面放一个隐藏的iframe（通过width:0px;height:0px;position:absolute;left:-500px;top:-500px;控制隐藏），我们想打印哪些div的内容就预先把这部分内容全部复制到iframe里面，然后就打印iframe就可以了。

var printArea = document.getElementById("printArea").innerHTML;
var iframe = document.getElementById("printIframe");

这段代码里面的document.getElementById("printArea").innerHTML你不必一定要这么获取，对于Ext的话你就直接通过Ext.getCmp('printArea').getEl().getHTML()也可以。

追问

不行啊，我的panel中必须要写html属性的，因为我要在浏览器上显示出html中的那个网页(src=)，然后再点击打印按钮才可以。
我当时的想法是，每个tab里面都有个panel，每个panel中对应的有一个html属性，也就是在panel中调用显示这个jsp文件，每个tab也都有一个打印按钮，这个按钮只对应相应的打印出jsp。而且我这边还不能随便修改显示的jsp文件

追答

汗！！！

你的panel这样写吧

如果你是extjs3

{

    xtype : 'panel',

    id : 'printArea',

    url:'JSP地址'

}

如果你是extjs4

{

    xtype : 'panel', 

   loader: {
       url:'JSP地址',

       autoLoad: true
     }

    id : 'printArea'

}

如果还不成，你就按照你的的

然后在button的click事件里写：

var iframe = document.getElementById("printlframe02");

iframe.contentWindow.focus();//IE will print parent window without this statement.

iframe.contentWindow.print();

其实关键方法原理都知道了，解决方法很多种的。在不成你ajax从后台拿到jsp的html也是可以的。