Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get attachment file content with jQuery

Tags:

jquery

file

ajax

On a get response I have content-disposition: attachment;filename=f.csv and I need to download content of this file on the page .
On a $.ajax request I have an error. How can I get content of file using jQuery ajax(or get)?
UPD

error: function( jqXHR, textStatus, errorThrown ) {
  console.log( jqXHR, textStatus, errorThrown );
}  

get

Object {
    ...
    readyState 0
    responseText ""
    status 0
    statusText "error"
}, error,  

UPD 2
I found a jquery.fileDownload plugin, but it shows browser's window with save or open dialog, like this: save/open dialog
But I need to get file content.
I'm no need to download file on computer.

UPD 3
Full code listing:

$.ajax( {
    url: link,
    crossDomain: true,
    dataType: "text",
    success: function( data, textStatus, jqXHR ) {
        alert( data );
    },
    error: function( jqXHR, textStatus, errorThrown ) {
        console.log( jqXHR, textStatus, errorThrown );
    }
} );  

File generates by another service and I can't change it.
UPD 4
First of all I'l try to get json data from another domain like this:

$.ajax( {
    url: link,
    async: true,
    cache: true,
    dataType: "jsonp",
    crossDomain: true,
    type: "GET",
    jsonp: "finance_charts_json_callback",
    jsonpCallback: "finance_charts_json_callback",
    error: function( jqXHR, textStatus, errorThrown ) {
        console.log( jqXHR, textStatus, errorThrown );
    },
    success: function( data, textStatus, jqXHR ) {
        console.log( data );
    }
} );  

link looks like http://chartapi.finance.yahoo.com/instrument/1.0/a/chartdata;type=quote;ys=2012;yz=2;ts=1234567890/json?finance_charts_json_callback=finance_charts_json_callback

And it's response headers:

HTTP/1.1 200 OK
Date: Wed, 30 Apr 2014 12:01:08 GMT
P3P: policyref="http://info.yahoo.com/w3c/p3p.xml", CP="CAO ... GOV"
Cache-Control: public
Expires: Thu, 01 May 2014 00:32:18 GMT
Last-Modified: Wed, 30 Apr 2014 00:32:18 GMT
Content-Type: text/javascript; charset=utf-8
Content-Encoding: gzip
Vary: Accept-Encoding,X-Ssl
Age: 0
Via: http/1.1 yts39.global.media.ir2.yahoo.com (...)
Server: ATS
Connection: keep-alive  

All works fine.

When I try to get file from another server there it's response headers:

HTTP/1.1 200 OK
Cache-Control: no-cache
Date: Wed, 30 Apr 2014 12:09:01 GMT
Pragma: no-cache
Content-Type: text/csv
Expires: -1
Server: Microsoft-IIS/6.0
X-Powered-By: ASP.NET
X-AspNet-Version: 2.0.50727
content-disposition: attachment;filename=export.csv
Content-Encoding: gzip
Vary: Accept-Encoding
like image 415
ostapische Avatar asked Apr 28 '14 08:04

ostapische


People also ask

How to get the content of the HTML element in jQuery?

Jquery get content methods like text(), html(), val() and attr() can be used to get the content of the HTML element. These methods when calls for getter method

How to access an HTML element with its attribute using jQuery?

If you want to perform some event but access an HTML element with its attribute, you can do so with jQuery attr(). Suppose you have an anchor tag and you want to get the href attribute of it. You have to pass attribute as an argument of the attr() which you want to get.

How to split the content of a text file using jQuery?

In the preceding script we are taking the contents from the text file using the get method of jQuery. And once the data is retrieved, we are splitting the data. To do that we are using a separator (myBreak) in our content. Add the following CSS styles.

How to get the content of a DOM object using jQuery?

Script to get the content --> Get Attributes The jQuery attr () method is used to get attribute values of DOM objects. Example: This example uses attr () method to get the attribute value. <!-- Script to get the attribute value --> Writing code in comment? Please use ide.geeksforgeeks.org , generate link and share the link here.


1 Answers

It is not possible to get the file content because it resides on a different domain, content-disposition data is not compatible with JSONP and the server doesn't support CORS (Cross Origin Resource Sharing) via the Access-Control-Allow-Origin header.

Your first request works because the server is responding with JSONP. However your content-disposition request is receiving raw data (which is not possible to access without CORS).

JSONP works by requesting the resource as a <script>, the server responds with a JavaScript function call, passing the data as the argument. So when you receive the script, the browser executes it and you can access the data in the function.

The content-disposition request works by having the sever output the raw content of the file, and there is no JavaScript function call like in JSONP, so although the browser receives the data, it will not allow you to access it.

The only two possible solutions are:

  • Ask the server administrator to enable CORS.
  • Proxy your ajax request through a server side script on the same domain as your JavaScript, which will not be subject to the same cross domain restrictions because it will be a server to server request.
like image 179
MrCode Avatar answered Sep 28 '22 11:09

MrCode