1. #1
    Sencha User
    Join Date
    Jun 2012
    Posts
    11
    Vote Rating
    3
    jgate is on a distinguished road

      2  

    Default Answered: Download file using javascript extjs

    Answered: Download file using javascript extjs


    Hi -

    I am having a link which if I paste to the browser asks me to download a file as xls. I want to call this url using extjs GET call. So that programatically I can invoke the download of the file.

    Here is the current code I am using

    Ext.Ajax.request({
    url: exportApiUrl,
    method: 'GET',
    contentType: "application/vnd.ms-excel",
    success: function(response){
    console.log("Success " + response);
    },
    failure: function(response) {
    console.log("Failed " + response);
    }
    });

    The above call doesn't make file download window to be shown. Let me know how I can get this working.

    Thanks

  2. See:

    http://stackoverflow.com/questions/3...ascript-jquery

    You can Ext-ify it a bit, but that's the basic premise.

  3. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,046
    Vote Rating
    657
    Answers
    471
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      2  

    Default


    See:

    http://stackoverflow.com/questions/3...ascript-jquery

    You can Ext-ify it a bit, but that's the basic premise.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  4. #3
    Sencha User
    Join Date
    Jun 2012
    Posts
    11
    Vote Rating
    3
    jgate is on a distinguished road

      1  

    Default


    Thanks ! That link worked. I modified it to do sencha way. Here is what I did

    {
    xtype : 'button',
    text : 'Export',
    listeners: {
    click : function() {

    var exportApiUrl = "http://myurl.com";

    var body = Ext.getBody();

    var frame = body.createChild({
    tag:'iframe',
    cls:'x-hidden',
    id:'hiddenform-iframe',
    name:'iframe'
    });

    var form = body.createChild({
    tag:'form',
    cls:'x-hidden',
    id:'hiddenform-form',
    action: exportApiUrl,
    target:'iframe'
    });

    form.dom.submit();

    }
    }
    }

  5. #4
    Sencha User
    Join Date
    Nov 2012
    Location
    Banglore.
    Posts
    6
    Vote Rating
    0
    shashidhar.gr is on a distinguished road

      0  

    Default


    thank you jgate .. your code snippet helped to solve my problem ..

  6. #5
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    105
    Vote Rating
    5
    Answers
    5
    Maxeta is on a distinguished road

      0  

    Default


    When I run your code, but change the URL to map to my WCF service something weird happens. The URL gets truncated, so instead of it being "./FileHandler.svc/Download?fileName=myFile.pdf" it ends up being "./FileHandler.svc/Download?". Any ideas why?

    I'm using Fiddler to check my HTTML request and response (which is where I see the truncation). The generated HTML looks correct through:

    Code:
    <iframe name="iframe" class="x-hidden" id="hiddenform-iframe">
    <form class="x-hidden" id="hiddenform-form" action="./FileHandler.svc/Download?fileName=myFile.pdf" target="iframe"/>
    So why when it get's submitted does it change to "./FileHandler.svc/Download?".

    Update: I removed the form/submission code, and just generated an iframe with src: url, like this:
    Code:
          var frame = body.createChild({
            tag: 'iframe',
            cls: 'x-hidden',
            id: 'hiddenform-iframe',
            name: 'iframe',
            src: url
          });
    and everything worked as expected, still have no idea why the querystring was being stripped off my submit, and I'd totally like to know how to submit with a querysting, but for now this is an okay workaround.
    Last edited by Maxeta; 22 Oct 2013 at 10:20 AM. Reason: Update

  7. #6
    Sencha Premium Member sonata82's Avatar
    Join Date
    Aug 2011
    Posts
    19
    Vote Rating
    9
    sonata82 will become famous soon enough

      1  

    Default


    My "Extification":

    Code:
    Ext.create('Ext.Component', {
        renderTo: Ext.getBody(),
        cls: 'x-hidden',
        autoEl: {
            tag: 'iframe',
            src: 'reports/review?somevars=somevalue'))
        }
    });