web-dev-qa-db-ja.com

AngularJSでJSONをExcelにエクスポートまたは変換する方法は？

私は4つのオブジェクトを含む配列を抽出しています。各オブジェクトには、剣道チャートデータソースから、Angularプロジェクトの内部に配列があります。

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

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

これまでのところ、JSONを独自のファイル（.jsonとフォーマットされていない.xlsの両方）としてダウンロードできました。

各オブジェクトを本にして、その本の中で、最初の列にタイムスタンプ、別の列に値1などのフォーマットを設定したいと思います。列のヘッダーは、タイムスタンプ、値1の名前などにする必要があります（ユーザー設定に従って、UIでこれらを翻訳しています）。

角度を使用してこのタイプのフォーマットされた.xlsファイルを構築するにはどうすればよいですか？このための特定の優れたライブラリはわかりません。これは、Angularでそれを使用する方法については明らかです。

javascriptangularjsjsonexcelexport-to-excel
6
mesosteros

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：複数のワークシートの問題も解決しました。複数ワークシートメソッドを使用する場合は、アスタリスクを削除してヘッダーを置き換える必要があります。クエリ内の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]);
7
mesosteros

[〜＃〜] xlsx [〜＃〜]ライブラリを使用してJSONをXLSファイルに変換し、ダウンロードできます。 AngularJSアプリケーションのサービスを作成し、以下のコードを持つサービスメソッドとして呼び出すだけです。

このチュートリアルにはJSおよびjQueryコードが含まれていることがわかりましたが、このコードを参照してAngularJSで使用できます。

動作中 デモ

ソース link

メソッド

インクルードライブラリ

<script type="text/javascript" src="//unpkg.com/xlsx/dist/xlsx.full.min.js"></script>

JavaScriptコード

    var createXLSLFormatObj = [];

    /* XLS Head Columns */
    var xlsHeader = ["EmployeeID", "Full Name"];

    /* XLS Rows Data */
    var xlsRows = [{
            "EmployeeID": "EMP001",
            "FullName": "Jolly"
        },
        {
            "EmployeeID": "EMP002",
            "FullName": "Macias"
        },
        {
            "EmployeeID": "EMP003",
            "FullName": "Lucian"
        },
        {
            "EmployeeID": "EMP004",
            "FullName": "Blaze"
        },
        {
            "EmployeeID": "EMP005",
            "FullName": "Blossom"
        },
        {
            "EmployeeID": "EMP006",
            "FullName": "Kerry"
        },
        {
            "EmployeeID": "EMP007",
            "FullName": "Adele"
        },
        {
            "EmployeeID": "EMP008",
            "FullName": "Freaky"
        },
        {
            "EmployeeID": "EMP009",
            "FullName": "Brooke"
        },
        {
            "EmployeeID": "EMP010",
            "FullName": "FreakyJolly.Com"
        }
    ];


    createXLSLFormatObj.Push(xlsHeader);
    $.each(xlsRows, function(index, value) {
        var innerRowData = [];
        $("tbody").append('<tr><td>' + value.EmployeeID + '</td><td>' + value.FullName + '</td></tr>');
        $.each(value, function(ind, val) {

            innerRowData.Push(val);
        });
        createXLSLFormatObj.Push(innerRowData);
    });


    /* File Name */
    var filename = "FreakyJSON_To_XLS.xlsx";

    /* Sheet Name */
    var ws_name = "FreakySheet";

    if (typeof console !== 'undefined') console.log(new Date());
    var wb = XLSX.utils.book_new(),
        ws = XLSX.utils.aoa_to_sheet(createXLSLFormatObj);

    /* Add worksheet to workbook */
    XLSX.utils.book_append_sheet(wb, ws, ws_name);

    /* Write workbook and Download */
    if (typeof console !== 'undefined') console.log(new Date());
    XLSX.writeFile(wb, filename);
    if (typeof console !== 'undefined') console.log(new Date());
1
Code Spy

JSONをCSVとしてエクスポートおよびダウンロードするためのAngularディレクティブ。 bower install ng-csv-downloadを実行します。 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>
1
Saniya syed qureshi