通过发送POST参数在ExtJS 4中显示PDF

Display a PDF in Ext JS 4 by sending POST parameters

本文关键字:ExtJS 显示 PDF 参数 POST      更新时间:2023-09-26

要使用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();

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

提前感谢!

目前最好的解决方案是接收POST参数的iframe(但我找不到以JSON格式发送{toto:‘abc’}的方法)。

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

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