korgoth
korgoth

Reputation: 191

Display a PDF in Ext JS 4 by sending POST parameters

To display a PDF document with my Ext JS 4 application I use the following code (GET request):

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

Now I would like to display a PDF and it needs a complex JSON object sent by POST request to be generated.I try to send an 'ajax request' with my JSON parameter 'myJsonParameter' and display the result. Is it possible to display the request.responceText (which contains binary data of my PDF) in the window ?

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

I try this too; but the render display special characters and not a PDF document:

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

Remark: I don't know if it's a good approach; any help will be very welcome.

Thanks in advance!

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

Upvotes: 1

Views: 4076

Answers (1)

SKS
SKS

Reputation: 115

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

We used below code to generate, please try.

Upvotes: 2

Related Questions