Unable to save content more than 8Mb in a CSV file with Angular JS

I get a string as response from my backend with more than 8MB of csv content.

with this code :

myService.getCsvExportContent(vm.searchParams).then(function (content) {
        var encodedUri = encodeURI(content);
        var link = document.createElement("a");
        link.setAttribute("href", encodedUri);
        link.setAttribute("download", "MCsExport.csv");

When the result is less that 8Mb, it creates the whole file but when it’s more than 8Mb, it saves the half of data to the file and I lose data. (I can see the size by debugging in my browser)

I tried angular-file-saver but I still got errors the injection of the dependency doesn’t work for me in AngularJS.

I tried creating Blob object with the content, same result.

Please help. Thank you.

Here is Solutions:

We have many solutions to this problem, But we recommend you to use the first solution because it is tested & true solution that will 100% work for you.

Solution 1

Try this way, that works for me:

myService.getCsvExportContent(vm.searchParams).then(function (content) {
    var link = document.createElement("a");
    var blob = new Blob([content],{type: 'text/csv;charset=utf-8;'});
    var url = URL.createObjectURL(blob);
    link.href = url;
    link.setAttribute("download", "MCsExport.csv");

Solution 2

Thank you for helping. Finally injecting ngFileSaver worked for me. bower cache clean then bower install angular-file-saver --save-dev and my injected object is recognized.

And so FileSaver.saveAs(blob, "filePath.csv") worked pretty fine.

var blob = new Blob([content], {type: 'text/csv;charset=utf-8'});    
FileSaver.saveAs(blob, "Export.csv");

Note: Use and implement solution 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply