Я шукаю способи перетворення об'єкта JSON у формат CSV за допомогою Angular. Я натрапив на це https://www.npmjs.com/package/jsonexport що саме я хочу використовувати,але я не впевнений, якщо я дійсно можу використовувати це з Angular (здається, вузол специфічний?), А якщо ні, чи є готові директиви і т.д.
Чи може хто-небудь вказати мені на деякі корисні приклади, я мав озирнутися, і вони, здається, мало і далеко, і те, що я знайшов тільки здається, справляється з дуже базовими плоскими структурами JSON.
Дякую
Відповіді:
3 для відповіді № 1Спробуйте це http://ngmodules.org/modules/ng-csv
Для робочого прикладу - https://asafdav.github.io/ng-csv/example/
Приклад використання js (взято з їхніх документів)
Сценарій
var myapp = angular.module("myapp", ["ngSanitize", "ngCsv"]);
myapp.controller("myctrl", function ($scope) {
$scope.filename = "test";
$scope.getArray = [{a: 1, b:2}, {a:3, b:4}];
$scope.addRandomRow = function() {
$scope.getArray.push({a: Math.floor((Math.random()*10)+1), b: Math.floor((Math.random()*10)+1)});
};
$scope.getHeader = function () {return ["A", "B"]};
$scope.clickFn = function() {
console.log("click click click");
};
});
Розмітка
<div ng-app="myapp">
<div class="container" ng-controller="myctrl">
<div class="page-header">
<h1>ngCsv <small>example</small></h1>
</div>
<div class="form-group">
<label for="filename">Filename </label>
<input type="text" id="filename" class="form-control" ng-model="filename">
</div>
<div class="form-group">
<label for="separator">Field separator</label>
<input type="text" id="separator" class="form-control" ng-model="separator" ng-init="separator=","">
</div>
<div class="form-group">
<label for="decimal-separator">Decimal separator</label>
<input type="text" id="decimal-separator" class="form-control" ng-model="decimalSeparator" ng-init="decimalSeparator="."">
</div>
<button class="btn btn-default"
ng-csv="getArray" filename="{{ filename }}.csv" field-separator="{{separator}}" decimal-separator="{{decimalSeparator}}"
>Export to CSV</button>
<button class="btn btn-default"
ng-csv="getArray" csv-header="getHeader()" filename="{{ filename }}" field-separator="{{separator}}" decimal-separator="{{decimalSeparator}}"
>Export to CSV with header</button>
<button class="btn btn-default"
ng-csv="getArray" csv-header="getHeader()" filename="{{ filename }}" field-separator="{{separator}}" decimal-separator="{{decimalSeparator}}"
ng-click="clickFn()">Export with ng-click</button>
<button class="btn btn-default"
ng-csv="getArray" filename="{{ filename }}.csv" field-separator="{{separator}}" decimal-separator="{{decimalSeparator}}" add-bom="true"
>With BOM</button>
<button class="btn btn-default" ng-click="addRandomRow()">Add row</button>
</div>
</div>
0 для відповіді № 2
Немає можливості для експорту даних підмережіui-grid. Але у нас є інший вибір для експорту ui-grid і даних підсети як .csv-файлу за допомогою FileSaver.js. Я створив Директиву для отримання даних grid / Json, а потім форматування даних, як деревоподібна структура і потім завантажте файл .csv за допомогою FileSaver.js, він має обмеження до вкладеної сітки.
angular.module("exampleModule", []) .controller("exampleController", function ($scope) { $scope.dataList = [ { id: 1, name: "github", price: "200$", publisher: { name: "hieutran", company: "Dtag-VN" }, nested:[ { name: "name1", company: "company1" }, { name: "name2", company: "company2" }] }, { id: 2, name: "twitter", price: "500$", publisher: { name: "twitter tran", company: "Canada" }, nested:[] }, { id: 3, name: "google", price: "300$", publisher: { name: "tran", company: "Vietname" }, nested:[ { name: "name3", company: "company3" }, { name: "name4", company: "company4" }] } ] }) .directive("ngGridJsonExportExcel", function($timeout) { return { restrict: "AE", scope: { data: "=", filename: "=?", reportFields: "=", nestedReportFields: "=", nestedDataProperty: "@" }, link: function(scope, element) { scope.filename = !!scope.filename ? scope.filename : "export-excel"; function generateFieldsAndHeaders(fieldsObject, fields, header) { _.forEach(fieldsObject, function(field, key) { if (!field || !key) { throw new Error("error json report fields"); } fields.push(key); header.push(field); }); return {fields: fields, header: header}; } var fieldsAndHeader = generateFieldsAndHeaders(scope.reportFields, [], []); var fields = fieldsAndHeader.fields, header = fieldsAndHeader.header; var nestedFieldsAndHeader = generateFieldsAndHeaders(scope.nestedReportFields, [], [""]); var nestedFields = nestedFieldsAndHeader.fields, nestedHeader = nestedFieldsAndHeader.header; function _convertToExcel(body, header) { return header + "n" + body; } function _objectToString(object) { var output = ""; _.forEach(object, function(value, key) { output += key + ":" + value + " "; }); return """ + output + """; } function generateFieldValues(list, rowItems, dataItem) { _.forEach(list, function(field) { var data = "", fieldValue = "", curItem = null; if (field.indexOf(".")) { field = field.split("."); curItem = dataItem; // deep access to obect property _.forEach(field, function(prop) { if (curItem !== null && curItem !== undefined) { curItem = curItem[prop]; } }); data = curItem; } else { data = dataItem[field]; } fieldValue = data !== null ? data : " "; if (fieldValue !== undefined && angular.isObject(fieldValue)) { fieldValue = _objectToString(fieldValue); } rowItems.push(fieldValue); }); return rowItems; } function _bodyData() { var body = ""; _.forEach(scope.data, function(dataItem) { var rowItems = [];var nestedBody = ""; rowItems = generateFieldValues(fields, rowItems, dataItem); //Nested Json body generation start if (scope.nestedDataProperty && dataItem[scope.nestedDataProperty].length) { _.forEach(dataItem[scope.nestedDataProperty], function(nestedDataItem) { var nestedRowItems = [""]; nestedRowItems = generateFieldValues(nestedFields, nestedRowItems, nestedDataItem); nestedBody += nestedRowItems.toString() + "n"; }); var strData = _convertToExcel(nestedBody, nestedHeader); body += rowItems.toString() + "n" + strData; ////Nested Json body generation end } else { body += rowItems.toString() + "n"; } }); return body; } $timeout(function() { element.bind("click", function() { var bodyData = _bodyData(); var strData = _convertToExcel(bodyData, header); var blob = new Blob([strData], { type: "text/plain;charset=utf-8" }); return saveAs(blob, [scope.filename + ".csv"]); }); }, 1000); } }; });
</ pre>
HTML code:
<button ng-json-export-excel data="dataList" nested-data-property="nested" report-fields="{id: "ID Heder", name: "Name Header", price: "Price Head", "publisher.name": "Publisher Head", "publisher.company": "Company Head"}" nested-report-fields="{name: "Nested Name", company: "Nested Company"}">Json Export</button>
</ pre></ code> Ось мій plunker
</ code></ p>