Ext.Ux.Printer 打印图像不起作用

Question

我已经下载了https://github.com/edspencer/Ext.ux.Printer 和
导入 Printer.js 和 Base.js

在 Base.Js 中我添加了图像渲染代码：

 Ext.ux.Printer.imageRenderer = Ext.extend(Ext.ux.Printer.BaseRenderer, {
 generateBody: function(image) {
   return String.format("<div class='image-print'>{0}</div>", image.body.dom.innerHTML);
 }
});

Ext.ux.Printer.registerRenderer('image', Ext.ux.Printer.imageRenderer);

这里是显示ID为displayimage的图像的地方

items: [Printtoolbar,{
xtype : 'image',
id : 'displayimage',
style: {
'display': 'block',
'margin': 'auto'
},
width: 320,
height: 240,
}]

按下打印按钮时打印图像

var PrintImgBtn = Ext.getCmp('btnPrint');
    PrintImgBtn.on('click', function(){
        printImg = Ext.getCmp('displayimage');  
        Ext.ux.Printer.print(printImg);

不幸的是，当我按下打印按钮时，什么也没有发生。

Answer 1

您可以打开一个窗口并打印它。在您的按钮处理程序中：

...
handler: function() {
    var img = Ext.getCmp('displayimage');
    if(img) {
        var html = img.container.dom.innerHTML;
        var win = window.open();
        win.document.write(html);
        win.print();
        win.close();
    }
}
...

打印示例：http://jsfiddle.net/wXfFN/3/

Answer 2

如果您使用的是 Iframe 'Ext.ux.iFrame'，那么您可以使用类似的东西

var iframe = this.down('iframe');
iframe.getFrame().contentWindow.print(); 

如果你想在 iframe 内容中添加一些额外的内容

 var iframe = this.down('iframe');
 var contentWindow = iframe.getFrame().contentWindow;
 var iFrameNewContent = "<div>This will be helpfull</div>" + contentWindow.document.body.innerHTML;

// set iFrameNewContent to content window
contentWindow.document.body.innerHTML = iFrameNewContent;
contentWindow.print();

优点是所有应用于 iframe 内容的样式，可以在打印文档中看到

还要检查这个链接是否有用 https://druckit.wordpress.com/2014/02/15/ext-js-4-printing-the-contents-of-an-ext-panel/