Results 1 to 8 of 8

Thread: Download file using javascript extjs

  1. #1
    Sencha User
    Join Date
    Jun 2012
    Posts
    11
    Vote Rating
    3
      2  

    Default 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
    18,435
    Answers
    651
    Vote Rating
    859
      1  

    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
      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
      0  

    Default

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

  6. #5
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    114
    Answers
    5
    Vote Rating
    7
      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
    20
    Vote Rating
    9
      1  

    Default

    My "Extification":

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

  8. #7
    Sencha User
    Join Date
    Feb 2016
    Posts
    2
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by Maxeta View Post
    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.
    Well, If you want to know why, just check out the difference between working on forms with method set to post and such set to get. When you set your method to post, the action-url will be taken as is. When set to get, your url will be truncated of the query string, because these are already get params. To cope with this, you could send them via hidden fields.

  9. #8
    Sencha User
    Join Date
    Feb 2016
    Posts
    15
    Vote Rating
    2
      0  

    Default

    Hi,
    I am getting the following error when I am clicking the button 2nd time, I have a handler function for a click event which sends the form data in hidden iframe.

    Does anyone know what changes should I do in my code to get rid of this error?

    ERROR: Uncaught Error: DOM element with id iframe in Element cache is not the same as element in the DOM. Make sure to clean up Element instances using destroy()

    Code:
    {
    
    var body =Ext.getBody();var frame = body.createChild({tag:'iframe',cls:'x-hidden',id:'iframe',name:'iframe'});var form = body.createChild({ tag:'form',cls:'x-hidden',id:'form',params: cloneExportObject ,method:'post',action:link,target:'iframe',enctype:'application/x-www-form-urlencoded',encoding:'application/x-www-form-urlencoded'});var hiddenItem1 = document.createElement('input');Ext.fly(hiddenItem1).set({type:'hidden',value: cloneExportObject.securityId,name:'securityId'});form.appendChild(hiddenItem1);var hiddenItem2 = document.createElement('input');Ext.fly(hiddenItem2).set({type:'hidden',value: cloneExportObject.uniqueSearchId,name:'uniqueSearchId'});form.appendChild(hiddenItem2);form.dom.submit();}


Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •