2017-02-17 106 views
1

进出口新的angularjs和IM试图导出数据的xlsx格式,但 我的数据是不来任何一个可以帮助我在这如何导出 因为我已经解析了json数据csv,但是如果有的话仍然可以帮助它 很容易,请让它在小提琴并发送给我,感谢 提前。如何将文件JSON导出为CSV或XLSX格式Angularjs

<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,请帮我在这我已经 在谷歌搜索,但我没有得到这个确切的解决方案。 ...请 帮我一把。只是我想报告明智地导出数据,因为它是 报告生成。

回答

0

当我需要类似的东西时,ng-csv和其他解决方案并没有完全帮助。我的数据在$范围内,没有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> 
+0

但我在嵌套的JSON数组fromat数据,我不无如何在CSV转换,因为即时通讯从昨天挣扎请让我知道如果u可以获取我的嵌套的数据会eacsy我感谢 – Rocker

+0

请不要用我的JSON数据发送给我,这对我来说很简单,当我尝试即时获取错误时。我也谷歌搜索,但不是相似的嵌套json数组数据..请做这个josn,谢谢 – Rocker

+0

你可以使用另一个'angular.forEach'里面我提供的答案。 _“我只能向你展示门,你是那个必须穿过它的人。”_ - [Morpheus](http://www.quotes.net/mquote/60255) –

相关问题