Download fails for large json string -Angular JS

Question

I've written an application in angular for file download, the application is working fine only for small json string, but comes to large string the download fails. Can anyone please tell me some solution for this.

I'm using REST webservice

 var json = _.getJson(); // here json value object be received from a script function 
 var myURL = 'rest/myMethod?jsonValue=' + JSON.stringify(json);
  _.downloadFile(myURL);

The downloadFile method :

downloadFile: function(URL)
{
    $.fileDownload(URL).done(function(e, response)
    {
      console.log('download success');
    }).fail(function(e, response)
    {
      console.log('fail');
    });
}

Are you attaching the JSON to the URL? URL's only work up to about 2000 characters (give or take, depends on browser). — Jorg, Mar 14 '14 at 05:05
@Jorg so what will i do to send such big json string to the server — Alex Man, Mar 14 '14 at 05:08
Send it as POST data generally. Angular's `$http` injector has something for that, too — Jorg, Mar 14 '14 at 05:09

score 1 · Answer 1 · edited May 23 '17 at 10:26

1

I see two potential problems:

The request URL might be too long (see: this discussion)
The stringified JSON contains characters not valid in a URL

If the URL is too long, you'd have to move the jsonValue into the body of your request rather than passing it as a URL parameter.

To address the second problem, you need to URI encode the stringified value:

var myURL = 'rest/myMethod?jsonValue=' + encodeURIComponent( JSON.stringify(json) );

BTW, looking at tha fail parameters should indicate why the request failed in the first place.

edited May 23 '17 at 10:26

Community

1
1

answered Mar 14 '14 at 05:14

Stepan Riha

1,736
14
12

This unfortunately doesn't work for bigger JSON files – maryoush Jan 07 '18 at 23:00

score 1 · Accepted Answer · answered Mar 14 '14 at 05:15

1

As per the comments, here's how to POST using Angular. I can only give you an example here. Header might depend on the angular version etc etc.

function TestController($scope, $http) {
    $http({
        url: 'yourwebsite',
        method: "POST",
        data: json, //this is your json data string
        headers: {
           'Content-type': 'application/json'
        }
    }).success(function (data, status, headers, config) {
        //upload succesfull. maybe update scope with a message?
    }).error(function (data, status, headers, config) {
        //upload failed
    });

}

answered Mar 14 '14 at 05:15

Jorg

7,219
3
44
65

then how do i download the file using $.fileDownload – Alex Man Mar 14 '14 at 05:31
You can't download a url. your comments mention "sending to the server" so that's what I showed. I'm not entirely sure what your xhr request is trying to achieve. Are you sending it to a server in order to generate a file? – Jorg Mar 14 '14 at 05:33
actually i'm sending the json to the server and the server will generate an excel based on the json data and i will download it through $.fileDownload – Alex Man Mar 14 '14 at 05:34
You could send a URL back containing the location of the excel file, and use $http again in the `success` function or maybe send the whole excel back as binary, but that's a separate question alltogether. You might find an answer in here: http://stackoverflow.com/questions/3599670/ajax-file-download-using-jquery-php. The accepted answer looks to be demo'ing an excel file. – Jorg Mar 14 '14 at 05:39
which server side language? – Jorg Mar 14 '14 at 05:52
I'm sorry mate, I can't help you with that. Theoretically, I would generate the file, then set all headers to have the right mime types etc and echo the contents of the file as a response. It *should* initiate a download... No need for another `_downloadFile` function. Maybe open a new question with this particular problem? – Jorg Mar 14 '14 at 06:03

superxp1412 · Answer 3 · 2015-07-31T10:18:39.490

Here is an example for using $http of Angular for sending a post request and download a XML file from the server.

$http({
            url: '$your_URL_here$', // you should replace $your_URL_here$ by your own url
            method: 'POST',
            responseType: 'arraybuffer',
            data: postJson, //***this is the request json data for post***
            headers: {
                'Content-type': 'application/json',
                'Accept': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
            }
        }).success(function(data){
                var blob = new Blob([data], {
                    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                });                
                saveAs(blob, $fileName$);// you should replace $fileName$ by your own fileName
            }
        }).error(function(data){
            //Some error handling method here
        });

Please note that you should import the FileSaver.js to save the file from 'arraybuffer' responseType.

Download fails for large json string -Angular JS

3 Answers3