Question

我正在使用ExtJS来显示条形码图片。我想在点击按钮后使用打印对话框打印该图像。

我有这样的功能：

function barcode_impr(pkIdGuess){

    var win = new Ext.Window({
        title: 'Barcode',
        layout: 'fit',
        autoScroll: true,
        y: 120,
        width: 300,
        height: 300,
        modal: true,
        closeAction: 'hide',
        items:
            [{
                xtype: 'panel',
                //height:'100px',
                docked: 'bottom',
                html: 'Here goes an image...',
                scrollable: true,
                renderTo: document.body,
                id: 'panel_print',
                tools: [{
                    type: 'print',
                    handler: function() {
                        window = Ext.getCmp('panel_print');
                        window.print();
                    }
                }]
            }]
    });
    win.show();
}

但这不仅显示了面板内容。我做错了什么？

Answer 1

我创建了一个函数doPrint，其中包含2个参数pnlId（放置条形码图像的面板的ID）和win（窗口参考）

我们可以使用如下功能： -

doPrint('panel_print', win);

此函数创建iframe并打印我们想要的内容，然后销毁iframe。

Working example

代码段： -

function doPrint(pnlId, win) {
    var pnl = Ext.getCmp(pnlId);
    var iFrameId = "printerFrame";
    var printFrame = Ext.get(iFrameId);

    if (printFrame == null) {
        printFrame = Ext.create('Ext.Component', {
            id: iFrameId,
            autoEl: {
                tag: "iframe"
            }
        });
        printFrame.addCls('x-hidden');
        win.add(printFrame);
    }

    var cw = printFrame.el.dom.contentWindow;

    // get the contents of the panel and remove hardcoded overflow properties
    var markup = pnl.body.dom.innerHTML;

    while (markup.indexOf('overflow: auto;') >= 0) {
        markup = markup.replace('overflow: auto;', '');
    }

    var str = Ext.String.format('<html><head>{0}</head><body><img src="resources/images/gabar-logo.gif">{1}</body></html>', '', markup);

    // output to the iframe
    cw.document.open();
    cw.document.write(str);
    cw.document.close();

    // remove style attrib that has hardcoded height property
    // cw.document.getElementsByTagName('DIV')[0].removeAttribute('style');

    // print the iframe
    cw.print();
    // destroy the iframe
    Ext.fly(iFrameId).destroy();
};

希望这会有所帮助。

仅打印面板内容

1 个答案: