Initiate File Download via GET request

Question

So I have ExtJS application in which a certain open in Combo leads to Download of file (read: Export to PDF). Now currently we do that using window.open in which we hit a specific URL which is RESTful in nature and something similar to.

window.open('https://example.com/myapp/api/module/someId/exportPDF.pdf?clientId=bizzare123&param1=someValue');

This opens up new Tab and I get the file to download. Now this is theoretically a GET request (though it doesn't appear in Chrome DevTools' Network tab), and I want to pass some JSON data as request body (data is large so I can't fit it in request params).

Can this be done by calling same URL using Ext.Ajax.request and passing jsonData? (I believe then I'll have to handle file coming in the response within success callback.

Thanks!

P.S. I'm on ExtJS 4.0

Update

Earlier we had only GET request to download the file but to support new feature, we had to customize download by sending POST request first, and API then sent file directly in response to POST request.

But as rixo mentioned in comments that async download of file might not be possible directly, I had to change API such that it sends file URL instead, in POST request, and then I can hit that URL and initiate file download. And given that it's huge enterprise webapp impacting millions of users mostly using IE, I wanted to avoid using modern APIs (which are obviously tempting but not supported on IE, like always).

Some proxies/firewall drop GET requests' body, and some HTTP servers reject such requests altogether. I wouldn't rely on that. Then you won't be able to download the file with AJAX if you can't rely on [XHR level 2](http://caniuse.com/xhr2) and the [File API](http://caniuse.com/fileapi). Ext doesn't wrap this for you yet... — rixo, Feb 12 '14 at 01:16

score 1 · Answer 1 · edited May 23 '17 at 11:55

1

You want to put a request body in a GET request? This isn't a typical application of the GET protocol (though not explicitly disallowed by the spec), so ExtJS doesn't support it out-of-the-box.

You can see in the ExtJS source code (4.0.7) that parameters to a GET request are automatically appended to the request URI.

if ((method == 'GET' || data) && params) {
  url = Ext.urlAppend(url, params);
  params = null;
}

This answer has more details, but the gist is "Write a proxy that will rewrite the request for you".

edited May 23 '17 at 11:55

Community

1
1

answered Feb 10 '14 at 18:37

Andrea

1,057
1
20
49

I understand it is not RESTful pattern followed strictly, but this is how our API works. :/ – Kushal Feb 11 '14 at 05:21
right, and a proxy is one way to get around the ExtJS limitation. Alternatively, you could extend its `Ext.Ajax.request()` in order to write the request yourself. Within the [ExtJS request](http://docs.sencha.com/extjs/4.0.7/source/Connection.html#Ext-data-Connection-method-setOptions) the params that are being sent to the xhr's [send method](http://www.w3.org/TR/2014/WD-XMLHttpRequest-20140130/#the-send%28%29-method) are being nulled out, as you can see above. You just gotta fix that :-) – Andrea Feb 11 '14 at 11:47

score 0 · Answer 2 · edited May 23 '17 at 12:10

If you just want the file to download, a common method is to embed an empty, hidden IFRAME in your document, then set the "src" attribute to the URL for the get request.

Here is a decent way of doing just that:

Download File Using Javascript/jQuery

This avoids the whole issue with new tabs or windows opening.

This does not answer your question directly. However, it does address your basic problem, which is how to initiate a less intrusive file download via a "RESTful" URL.

Initiate File Download via GET request

2 Answers2