2016-09-13 2 views
2

Я извлекаю массив с 4 объектами, и каждый объект имеет массив внутри, из моего источника данных кендо-диаграмм, в моем проекте Angular.Как экспортировать или конвертировать JSON в Excel в AngularJS?

Данные внутри каждого под-объекта различаются по размеру, но всегда включают временную метку и поля значений 1-5.

Мне нужно экспортировать этот массив в файл Excel (.xls или .xlsx NOT CSV).

До сих пор мне удалось загрузить JSON как файл самостоятельно (оба .json и unformatted .xls).

Я хотел бы, чтобы каждый объект был книгой и в этой книге, чтобы иметь форматирование, которое имеет метку времени в первом столбце, значение 1 в другом и т. Д. Заголовок для столбцов должен быть timestamp, value1 name и т. Д. (Я переводю их на ui в соответствии с пользовательскими настройками).

Как я могу создать этот формат форматированного файла .xls с помощью углового? Я не знаю особой хорошей библиотеки для этого, это ясно, как использовать ее в Angular.

+1

http://stackoverflow.com/questions/21680768/export-to-xls-using-angularjs имеет несколько вариантов, которые могут быть полезны –

ответ

6

После Nathan Beck's link sugestion, я использовал AlaSQL. Я получаю правильно отформатированные столбцы, просто нужно адаптировать мой массив к нескольким листам.

То, как мы интегрируем alaSQL в наш проект Angular, можно включить alasql.min.js и xlsx.core.min.js.

Тогда мы называем alasql метод в нашей функции

$scope.export = function(){ 
var arrayToExport = [{id:1, name:"gas"},...]; 
    alasql('SELECT * INTO XLSX("your_filename.xlsx",{headers:true}) FROM ?', arrayToExport); 
} 

EDIT: решаемые проблемы несколько листов, а также. Имейте в виду, что при использовании метода нескольких листов вам необходимо удалить звездочку и заменить заголовки: истинный объект в запросе с вопросительным знаком, передав параметры в отдельном массиве. Таким образом:

var arrayToExport1 = [{id:1, name:"gas"},...]; 
var arrayToExport2 = [{id:1, name:"solid"},...]; 
var arrayToExport3 = [{id:1, name:"liquid"},...]; 
var finalArray = arrayToExport1.concat(arrayToExport2, arrayToExport3); 

var opts = [{sheetid: "gas", headers: true},{sheetid: "solid", headers: true},{sheetid: "liquid", headers: true}]; 
alasql('SELECT INTO XLSX("your_filename.xlsx",?) FROM ?', [opts, finalArray]); 
1

Угловая директива по экспорту и загрузке JSON в формате CSV. Выполните bower install ng-csv-download. Run in plunkr

var app = angular.module('testApp', ['tld.csvDownload']); 
 

 
app.controller('Ctrl1', function($scope, $rootScope) { 
 
    $scope.data = {}; 
 

 
    $scope.data.exportFilename = 'example.csv'; 
 
    $scope.data.displayLabel = 'Download Example CSV'; 
 
    $scope.data.myHeaderData = { 
 
     id: 'User ID', 
 
     name: 'User Name (Last, First)', 
 
     alt: 'Nickname' 
 
    }; 
 
    $scope.data.myInputArray = [{ 
 
     id: '0001', 
 
     name: 'Jetson, George' 
 
    }, { 
 
     id: '0002', 
 
     name: 'Jetson, Jane', 
 
     alt: 'Jane, his wife.' 
 
    }, { 
 
     id: '0003', 
 
     name: 'Jetson, Judith', 
 
     alt: 'Daughter Judy' 
 
    }, { 
 
     id: '0004', 
 
     name: 'Jetson, Elroy', 
 
     alt: 'Boy Elroy' 
 
    }, { 
 
     id: 'THX1138', 
 
     name: 'Rosie The Maid', 
 
     alt: 'Rosie' 
 
    }]; 
 

 
});
<!DOCTYPE html> 
 
<html ng-app="testApp"> 
 

 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <title>Exporting JSON as a CSV</title> 
 
    <script>document.write('<base href="' + document.location + '" />');</script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script> 
 
    <script src="csv-download.min.js"></script> 
 
    <script src="app.js"></script> 
 
    </head> 
 

 
    <body> 
 
<div>Using an <a href="https://github.com/pcimino/csv-download" target="_blank">Angular directive for exporting JSON data as a CSV download.</a></div> 
 

 

 
<div ng-controller="Ctrl1"> 
 
    <h2>All Attributes Set</h2> 
 
    <csv-download 
 
      filename="{{data.exportFilename}}" 
 
      label="{{data.displayLabel}}" 
 
      column-header="data.myHeaderData" 
 
      input-array="data.myInputArray"> 
 
    </csv-download> 
 

 
    <hr /> 
 
    <h2>Only Required Attribute Set</h2> 
 
    <h3>Optional Attributes Default</h3> 
 
    <csv-download 
 
      input-array="data.myInputArray"> 
 
    </csv-download> 
 
</div> 
 
    </body> 
 

 
</html>