Display a PDF in Ext JS 4 by sending POST parameters

Question

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

Any particular reason not to use query string parameters and the first snipet you posted? — third_eye, Dec 17 '13 at 00:02
Yes! I generally try to not exceed more than 255 characters for string parameters. 'myJsonParameter' is bigger than that and it must be in JSON format because 'getDocument.do' is a Spring application request which map my JSON object to create a Java object. — korgoth, Dec 23 '13 at 10:07
Are you getting your `myJsonParam` correctly server side? Is your PDF generating as expected? ...Sorry for taking so long.. holidays (: — third_eye, Dec 26 '13 at 18:00
@third_eye: No problem, same think for me! yes, I receive 'myJsonParameter' as expected. I have the same problem as this post: http://stackoverflow.com/questions/5753811/get-response-file-use-extjs but I have to display the PDF with the default PDF viewer install on the client machine; so the best solution is an iframe. I'm going to post solution I used with POST parameter (no JSON) cause I can't pass much time on this issue. Thanks for your help! — korgoth, Dec 29 '13 at 22:31

score 2 · Answer 1 · answered Jan 03 '14 at 09:38

    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.

I have already look for a similar solution: I receive a JavaScript error in the console on line 'Ext.JSON.decode'. The error is: Ext.JSON.decode(): You're trying to decode an invalid JSON String: %PDF-1.4 %�쏢 ... — korgoth, Jan 08 '14 at 20:58
Request Headers= Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 *Accept-Encoding: gzip, deflate *Accept-Language: en-US,en;q=0.5 *Cache-Control: no-cache *Connection: keep-alive *Content-Length: 8 *Content-Type: application/x-www-form-urlencoded; charset=UTF-8 *User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:26.0) Gecko/20100101 Firefox/26.0 *X-Requested-With: XMLHttpRequest — korgoth, Jan 08 '14 at 21:04
@korgoth please check your server response and correct it, that's the only solution. — SKS, Jan 09 '14 at 09:32
What annoys me is the amount of effort needed to do a basic thing such as being able to display a generated PDF!!! Will test your solution. — avn, Aug 27 '15 at 09:18

Display a PDF in Ext JS 4 by sending POST parameters

1 Answers1