1

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);

残念ながら、印刷ボタンを押しても何も起こりません。

4

2 に答える 2

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/

于 2013-02-17T19:04:10.000 に答える
0

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 コンテンツに適用され、印刷ドキュメントで確認できることです。

また、このリンクが役立つかどうかを確認して ください

于 2016-01-15T05:04:24.213 に答える