Search code examples
ajaxextjsextjs4downloadhttp-post

Extjs 4 (with a code for 3.4 below) downloading a file returned from a post request


I have seen questions slightly related to this, but none that answer my problem. I have set up an Ext.Ajax.request as follows:

var paramsStringVar = 'param1=1&param2=two&param3=something&param4=etc';

Ext.Ajax.request({
  url: '/cgi-bin/url.pl',
  method:'POST',
  params:paramsStringVar,
  timeout:120000,
  success: function(response, opts){
    var objhtml = response.responseText; //content returned from server side
    console.log(objhtml);
  }

});

This request retrieves the appropriate content from the backend. One parameter is outputType, which can take values {html, excel, csv}. When returning html to display I am able to handle and display it correctly. Now on to the problem...

When I set the outputType parameter to csv or excel, I get back the appropriate content as csv or tsv(excel) as requested. BUT, I don't want the content, I want a prompt to download the file(csv or excel). How can I have the browser auto prompt the user to download the file instead of just retrieving the text content within extjs?

Version 4.07 so I can't use any 4.1 only features


Solution

  • Below is my solution. This is how I have it currently working. The response generates a download/open prompt, based on a response type of text/csv. Note that no iFrame or reference to an iframe are needed. I spent a lot of time hung up on the need for an iFrame, which actually broke my solution. An iFrame is not needed to generate a download prompt. What is needed is a request(submittal) similar to this one, along with a backend generating the appropriate csv with text/csv response header.

    var hiddenForm = Ext.create('Ext.form.Panel', {
      title:'hiddenForm',
      standardSubmit: true,
      url: /cgi-bin/url.pl
      timeout: 120000,
      height:0,
      width: 0,
      hidden:true,
      items:[
        {xtype:'hiddenField', name:'field1', value:'field1Value'},
        // additional fields
      ]
    })
    
    hiddenForm.getForm().submit()
    

    The standardSubmit line is vital