2016-09-13 10 views
2

私は4つのオブジェクトを持つ配列を抽出しています。各オブジェクトには、私の角度プロジェクトの剣道グラフのデータソースから配列があります。AngularJSでJSONをExcelにエクスポートまたは変換する方法は?

各サブオブジェクト内のデータのサイズは異なりますが、常にタイムスタンプと1〜5の値フィールドが含まれています。

この配列をExcelファイル(.xlsまたは.xlsxではなくCSV)にエクスポートする必要があります。

これまでのところJSONを独自のファイルとしてダウンロードしていました(.jsonとunformatted .xlsの両方)。

私は、各オブジェクトが本であり、その本の中で、最初の列にタイムスタンプ、別の値が1などの書式を持つことを望みます。列のヘッダーは、タイムスタンプ、値1の名前などでなければなりません(ユーザーの設定に応じてこれらを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を組み込むことです。

その後、我々はEDIT

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

私達の機能でalasqlメソッドを呼び出します。は、同様に複数のワークシート上の問題を解決しました。複数のワークシートメソッドを使用する場合は、アスタリスクを削除し、ヘッダーを置き換える必要があります。クエリー内のtrueオブジェクトは、疑問符で区切り、オプションは別の配列に渡します。したがって:

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>

関連する問題