PDA

View Full Version : Download file using javascript extjs



jgate
6 Jun 2013, 5:09 PM
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

evant
6 Jun 2013, 5:15 PM
See:

http://stackoverflow.com/questions/3749231/download-file-using-javascript-jquery

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

jgate
12 Jun 2013, 9:59 AM
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();

}
}
}

shashidhar.gr
6 Sep 2013, 12:56 AM
thank you jgate .. your code snippet helped to solve my problem ..

Maxeta
22 Oct 2013, 10:05 AM
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:



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


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.

sonata82
16 Jun 2014, 4:23 AM
My "Extification":



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

fcwernerl
29 Mar 2016, 5:55 AM
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:



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


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.

sujam
11 May 2016, 1:02 PM
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()


{

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