javascript - 通过发送 POST 参数在 Ext JS 4 中显示 PDF

Question

要使用我的 Ext JS 4 应用程序显示 PDF 文档，我使用以下代码(GET 请求):

Ext.create('Ext.window.Window', {
    items: {
    xtype: 'component',
        autoEl: {
            tag: 'iframe',
            src: 'getDocument.do?id=' + myDocumentId
        }
    }
 }).show();

现在我想显示一个 PDF，它需要生成一个由 POST 请求发送的复杂 JSON 对象。我尝试使用我的 JSON 参数“myJsonParameter”发送一个“ajax 请求”并显示结果。是否可以在窗口中显示 request.responceText(其中包含我的 PDF 的二进制数据)？

Ext.Ajax.request({
    url: 'getDocument.do',
    jsonData: myJsonParameter,
    binary: true,
    success: function(response, options){
        Ext.create("Ext.window.Window", {
            items: {
                xtype: 'component',
                html: '<embed width=100% height=100%' +
                    ' type="application/pdf"' +
                    ' src="data:application/pdf;' +
                    response.responseText +
                    '"></embed>'
            }
        }).show();
    }
});    

我也试试这个；但渲染显示特殊字符而不是 PDF 文档:

Ext.create("Ext.window.Window", {
    items: {
        xtype: 'component',
        loader: {
            url: 'getDocument.do',
            autoLoad: true,
            ajaxOptions: {
                binary: true,
                jsonData: myJsonParam,
                headers: "application/pdf"
            }
        }
    }
}).show();

备注:我不知道这是不是一个好方法；非常欢迎任何帮助。

提前致谢!

Best solution for the moment it's an iframe which received POST parameter (but I can't find a way to send {toto: 'abc'} in JSON format).

Ext.create('Ext.window.Window', {
    items: [{
        xtype: 'component',
        autoEl: {tag: 'iframe', name: 'myIframe'}
    },{
        xtype: 'form', hidden: true, 
        listeners: {
            afterrender: function(form){
                form.getForm().doAction('standardsubmit',{
                    target : 'myIframe', method : 'POST',
                    params: {toto: 'abc'},
                    url : '../myPath/getDocument.do'
                });
            }
        }
    }]
}).show();

Answer 1

    var that = this;
    Ext.Ajax.request({
        url: '<app url>',
        timeout: 120000, // optional
        scope : that,
        params: {
            investor_id:investor_id,
            scenario_id:scenario_id,
            prog_id:prog_id,
            action: 'po',
            operation: 'generate'
        },
        failure: function(response) {
            //handle failure condition
         },
         success: function(response){
            var responseObj = Ext.JSON.decode(response.responseText);
            var isSuccess = responseObj.success;
            var errorMsg = responseObj.errorMsg;
            var url = responseObj.url;

            if( isSuccess=="false" ) {
                //handle failure condition
            } else {
                //url
                var popUp = Ext.create('Ext.window.Window', {
                    //header:false,
                    height: 800,
                    modal:true, 
                    width: 1024,
                    layout:'anchor',
                    anchor:"100% 100%",
                    title:'Proposal Output',
                    maximizable: true,
                    minimizable: true
                });
                popUp.add({html: '<iframe height="730", width="1000" src="'+ url +'"></iframe>'});
                popUp.add({
                    xtype: 'button',
                    width: '80',
                    cls: 'close-button',
                    handler: function(){
                        var win = Ext.WindowManager.getActive();
                        if (win) {
                        win.close();
                        }
                    }
                });
                popUp.show();
            }
        }
 });

我们使用以下代码生成，请尝试。