How to export json file(data) which has mo

2020-04-14 16:23发布

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>

2条回答
孤傲高冷的网名
2楼-- · 2020-04-14 16:26

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.

查看更多
迷人小祖宗
3楼-- · 2020-04-14 16:52

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.

查看更多
登录 后发表回答