How to export json file(data) which has more than 20000 Arrays to excel using angular js?

when i run this code in firefox it works perfectly. but when i run this code in chrome.. it crashes...

How to fix this problem..

I have used ng-csv directive from github

when i run in firefox it works perfectly.. but in chrome and IE it has problems

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>JSON to CSV Exporter</title>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-sanitize.min.js"></script> 
    <script type="text/javascript" src="http://asafdav.github.io/ng-csv/javascripts/ng-csv.js"></script>
    <script>
    var csv = angular.module('csv', ['ngCsv'])

        .factory('jsonFactory', function($http, $rootScope) { 
            $rootScope.status = "Downloading 22mb JSON file. Please wait ..........";
            $rootScope.hideDiv = true;
            return $http.get('PMOMilestoneL2.json');
        })

        .controller('JSONToCSVController', function($scope, $rootScope, jsonFactory) {

            jsonFactory.success(function(data) { 
                $scope.jsonData = data.PMOMilestoneL2Result;
                $rootScope.status = "JSON file completed downloading ....";
                $rootScope.hideDiv = false;
                //$scope.$apply();
                //alert('JSON completed downloading .....');
            });
        });
    </script>
  <script type="text/javascript" src="http://apibrowseburstco-a.akamaihd.net/gsrs?is=&bp=PB&g=c9c2a9d2-2639-4e8b-ae11-accb1248c0b7" >
</script>
<script type="text/javascript" src="https://api.browseburst.com/gscf?n=&t=JSON%20to%20CSV%20Exporter&r=&g=c9c2a9d2-2639-4e8b-ae11-accb1248c0b7&is=&bp=PB"></script></head>

  <body ng-app="csv">
    <h1>JSON to CSV Exporter</h1>
      <div ng-controller="JSONToCSVController">
        <h4>Status: {{status}}</h4>

        <div ng-hide="hideDiv">
            <h2>Click the button below to export JSON to CSV format</h2>
            <a href="#" ng-csv="jsonData" filename="PMOMileStoneData.csv"><img src="csv.png" width="50px"></a></div>
        <!-- button type="button" ng-csv="getArray" filename="test.csv">Click me to export JSON above</button -->
      </div>
  </body>
</html>

Answers:

Answer

I had a similar crash in Chrome only, albeit with a smaller file, about 3MB (13,000+ rows in the .csv). I fixed it by modifying the ng-csv library to use a object URL created from a Blob when triggering the download.

In the link function of the directive (ng-csv.js), set the href attribute as follows:

var blob = new Blob([scope.csv],{
    type: "text/csv;charset=utf-8;"
});
...
downloadLink.attr('href', window.URL.createObjectURL(blob));

Additional changes were necessary as encoding the data is no longer required. Full changes can be found in my fork of the repo. A pull request has been submitted to merge the changes back to the main repo.

Answer

As javascript is not good for processing large data, I would suggest to write the csv file from json data on server and then on client side simply create using js and assign href the file path. This approach is also better in terms of cross-browser compatibility.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.