I'm working on a project where when a user clicks the download button, I make an XHR request to the server which is running Node with Restify. The response from the server is a string in the format of a CSV. I'm having some trouble downloading very large files (in my specific case the CSV string returned is 6,406,729 characters long). On small CSV files, my approach works perfectly on Chrome, however with this very large file, nothing downloads.
networkService.search($scope.query).then(function(data) {
//data is a string. When it is 6,406,729 chars long, this code doesn't
//work. I've tested this code on strings that are 100 chars long
//and it works perfectly
var hiddenElement = document.createElement('a');
hiddenElement.href = 'data:attachment/csv,' + encodeURI(data);
hiddenElement.target = '_blank';
hiddenElement.download = fileName;
hiddenElement.click();
})
.catch(function() {
//handle error
})
.finally(function() {
//clean up code
// We reach this point in the code no matter how long "data" is
console.log('reached finally');
});
Once the value of hiddenElement.href is set, it is 8,746,983 characters long. This suggests to me that encodeURI is working correctly and that something after it is probably failing (my guess is it's the click method). Most posts on Stack Overflow seem to suggest my approach for downloading a CSV and as I mentioned earlier it works for fairly small CSV files without any issues, just not for my large CSV.
Another curious piece of information I've gather is that if I copy theGET request that is made by the networkService and put it in Chrome's search bar I am able to download the large file. To me this suggests that there is something wrong with my Angular code, but again I'm not sure what is the issue.
Any help would be greatly appreciated.
