如何在 Angularjs 中将文件 json 导出为 CSV 或 XLSX 格式答案

【问题标题】：How to export the file json to CSV or XLSX format in Angularjs如何在 Angularjs 中将文件 json 导出为 CSV 或 XLSX 格式
【发布时间】：2017-02-17 06:23:22
【问题描述】：

我是 angularjs 新手，我正在尝试导出数据 xlsx 格式，但是我的数据没有来，任何人都可以帮助我解决如何导出因为我也解析了 json 数据 csv 但如果有的话仍然可以帮助它很容易，请把它放在小提琴中并发送给我，谢谢前进。

<html ng-app="myApp">
 <script src="https://rawgithub.com/eligrey/FileSaver.js/master/FileSaver.js" type="text/javascript"></script>
  <script src="http://alasql.org/console/alasql.min.js"></script>
  <script src="http://alasql.org/console/xlsx.core.min.js"></script>
<button ng-click="exportData()" class="btn btn-primary" style="float:right;padding-right:10px;">Export&nbsp;&nbsp;<i class="fa fa-arrow-down"></i></button>
</html>

js文件是

var app=angular.module('myApp',[]);
app.controller('exportreportController', ['$stateParams','$rootScope', '$scope', '$state', '$location', 'dashboardService', 'Flash','$http','$timeout',
function ($stateParams,$rootScope, $scope, $state, $location, dashboardService, Flash,$http,$timeout) {

 $scope.inverters = [
  {
    "InvDetails": "UPS",
    "LstRecords": [
      {
        "Id": 1,
        "Invertor_Id": 1,
        "Time_of_Reading": "20170214",
        "Lastreading": 0,
        "Readingby": 0
      },
      {
        "Id": 87,
        "Invertor_Id": 1,
        "Time_of_Reading": "20170215",
        "Lastreading": 5,
        "Readingby": 10
      },
      {
        "Id": 110,
        "Invertor_Id": 1,
        "Time_of_Reading": "20170216",
        "Lastreading": 10,
        "Readingby": 92
      },
      {
        "Id": 111,
        "Invertor_Id": 1,
        "Time_of_Reading": "20170216",
        "Lastreading": 92,
        "Readingby": 95
      }
    ]
  },
  {
    "InvDetails": "Power Supply",

    "LstRecords": [
      {
        "Id": 2,
        "Invertor_Id": 2,
        "Time_of_Reading": "20170214",
        "Lastreading": 0,
        "Readingby": 0
      },
      {
        "Id": 88,
        "Invertor_Id": 2,
        "Time_of_Reading": "20170215",
        "Lastreading": 7,
        "Readingby": 13
      },
      {
        "Id": 109,
        "Invertor_Id": 2,
        "Time_of_Reading": "20170216",
        "Lastreading": 13,
        "Readingby": 25
      },
      {
        "Id": 112,
        "Invertor_Id": 2,
        "Time_of_Reading": "20170216",
        "Lastreading": 25,
        "Readingby": 49
      }
    ]
  }
];

     $scope.exportData = function () {
        //alert("exporting");
        // var blob = new Blob([document.getElementById('example1').innerHTML], {
        //     type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
        // });
        // saveAs(blob, "Report.xls");
        var data="";
        $scope.headers=[];
         angular.forEach($scope.inverters,function(value,key){
// debugger
        var we=value.InvDetails;
        $scope.headers.push(we);
        $scope.last=value.LstRecords;
        angular.forEach($scope.last,function(value,key){

    data={
        "Id": value.Id,
        "Invertor_Id": value.Invertor_Id,
        "Time_of_Reading":value.Time_of_Reading,
        "Lastreading": value.Lastreading,
         "Readingby": value.Readingby
        };
        })
    })

         $scope.result=[];
         $scope.result0=[];
         $scope.result.push({
        "Invertor1":JSON.stringify(data)
         })
         // debugger
        alasql('SELECT * INTO XLSX("john.xlsx",{headers:true}) FROM ?',[$scope.result]);
    };
    }]);

我需要导出这个 csv 或 xlsx 请帮我解决这个问题在谷歌搜索，但我没有得到确切的解决方案....请帮帮我。只是我想以报告方式导出数据，因为它是报告生成。

【问题讨论】：

标签： javascript angularjs csv

【解决方案1】：

当我需要类似的东西时，ng-csv 和其他解决方案并不能完全提供帮助。我的数据在 $scope 中，没有显示它的 HTML 表格。因此，我构建了一个指令，使用 Sheet.js (xslsx.js) 和 FileSaver.js 将 json 数据导出到 Excel。

Here is my solution packed.

比如数据是：

$scope.jsonToExport = [
    {
      "col1data": "1",
      "col2data": "Fight Club",
      "col3data": "Brad Pitt"
    },
    {
      "col1data": "2",
      "col2data": "Matrix Series",
      "col3data": "Keanu Reeves"
    },
    {
      "col1data": "3",
      "col2data": "V for Vendetta",
      "col3data": "Hugo Weaving"
    }
];

我必须在控制器中为我的指令准备数据作为数组数组：

$scope.exportData = [];
// Headers:
$scope.exportData.push(["#", "Movie", "Actor"]);
// Data:
angular.forEach($scope.jsonToExport, function(value, key) {
  $scope.exportData.push([value.col1data, value.col2data, value.col3data]);
});

最后，向我的模板添加指令。它显示一个按钮。（见the fiddle）。

<div excel-export export-data="exportData" file-name="{{fileName}}"></div>

【讨论】：

但我在嵌套 json 数组中的数据我不知道如何在 csv 中转换，因为我从昨天开始苦苦挣扎，请让我知道你是否可以获取我的嵌套数据，这对我来说很方便，谢谢跨度>
请处理我的 json 数据 n 发送给我，这对我来说很容易，当我尝试我只得到错误时。我也用谷歌搜索过，但没有类似的嵌套 json 数组数据。请用这个 josn，谢谢
您可以在我提供的答案中使用另一个angular.forEach。 “我只能给你看门。你是必须穿过它的那个人。” -- Morpheus
我很抱歉地说我已经尝试过插入另一个 foreach 循环，因为它没有来，所以只有我一无所获。正如你所说，更多的数据即将到来意味着我问的是如何做到这一点，如果我的问题是真心的，我很抱歉你

【解决方案2】：

$scope.exportData = function (file_name,output_type,data) {
   if(output_type=="xlsx"){
         file_name=file_name+".xlsx";
         alasql('SELECT * INTO XLSX("'+file_name+'",{headers:true}) FROM ?', 
         [data]);
   }
   else{
         file_name=file_name+".csv";
         alasql('SELECT * INTO CSV("'+file_name+'",{headers:true}) FROM ?', 
         [data]);
   }

}

<html ng-app="myApp">
 <script src="https://rawgithub.com/eligrey/FileSaver.js/master/FileSaver.js" type="text/javascript"></script>
  <script src="http://alasql.org/console/alasql.min.js"></script>
  <script src="http://alasql.org/console/xlsx.core.min.js"></script>
<button ng-click="exportData('file_','csv',inverters)" class="btn btn-primary" >Export CSV<i class="fa fa-arrow-down"></i></button>
<button ng-click="exportData('file_','xlsx',inverters)" class="btn btn-primary" >Export CSV<i class="fa fa-arrow-down"></i></button>
</html>

【讨论】：