Экспорт JSON данных в файл CSV в AngularJs на основе идентификатора каждой строки пользовательского интерфейса - PullRequest
Новая
       105

Экспорт JSON данных в файл CSV в AngularJs на основе идентификатора каждой строки пользовательского интерфейса

0 голосов
/ 03 мая 2020

Экспорт JSON Данные в файл CSV в AngularJs на основе идентификатора каждой строки ui-grid

Мне нужна опция экспорта в CSV в каждой строке angularjs 1.0 UI-сетки, где пользователь нажимает на эту кнопку, и на основе идентификатора сервер отвечает на данные JSON, затем он должен загружаться в формате CSV.

См. Изображение ниже с кнопкой Экспорт CSV .

enter image description here

Вот что я пробовал до сих пор:

Столбец таблицы Определение 

         {
             field: "actions", "name": "Action",
             cellTemplate: '<button type="button" field-separator=","  ng-click="funcExport({{row.entity._id}})" csv-header="exportHeader" ng-csv="export" filename="Sample.csv">Export CSV</button>',
             width: "170"
         }

Функция экспорта в CSV : В настоящее время JSON данные основаны не на id, а в состоянии c для демонстрации. 

    /*Function to export*/
var funcExport = function (id) {
    $scope.exportarray = [];
    $scope.exportHeader = [];
    $scope.export = [];
    $scope.exportHeader = ['Licence', 'Condition'];

    $scope.exportarray = [{ "Licence": "229973", "Condition": "Usage" }, { "Licence": "24141", "Condition": "Level" }];

    $scope.export = $scope.exportarray;
}

Любая помощь будет оценена !!

Ответы [ 2 ]

1 голос
/ 03 мая 2020

Сначала преобразуйте JSON в строку CSV, разделенную запятыми, затем создайте тег привязки (a) установите эту строку CSV как href сделайте щелчок, удалите тег привязки. 

function convertToCSV(array) {

    var str = '';

    for (var i = 0; i < array.length; i++) {
        var line = '';
        for (var index in array[i]) {
            if (line != '') line += ','

            line += array[i][index];
        }

        str += line + '\r\n';
    }
    return str;
}

function exportCSVFile(headers, items, fileTitle) {

    items.unshift(headers);

    var csv = convertToCSV(items);
    var exportedFilenmae = fileTitle + '.csv' || 'export.csv';

    var blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
    if (navigator.msSaveBlob) { // IE 10+
        navigator.msSaveBlob(blob, exportedFilenmae);
    } else {
        var link = document.createElement("a");
        if (link.download !== undefined) { // feature detection
            // Browsers that support HTML5 download attribute
            var url = URL.createObjectURL(blob);
            link.setAttribute("href", url);
            link.setAttribute("download", exportedFilenmae);
            link.style.visibility = 'hidden';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
    }
}

/*Function to export*/
var funcExport = function (id) {

    var exportHeader = ['Licence', 'Condition'];

    var exportarray = [{ "Licence": "229973", "Condition": "Usage" }, { "Licence": "24141", "Condition": "Level" }];

    exportCSVFile(exportHeader , exportarray, 'download' );

}

Этот код был взят от здесь

0 голосов
/ 04 мая 2020

Вот рабочее решение

преобразование массива Javascript объекта в CSV 

function convertToCSV(objArray) {
    var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
    var str = '';

    for (var i = 0; i < array.length; i++) {
        var line = '';
        for (var index in array[i]) {
            if (line != '') line += ','

            line += array[i][index];
        }

        str += line + '\r\n';
    }

    return str;
}

Экспорт в CSV Функция 

function exportCSVFile(headers, items, fileTitle) {
     if (headers) {
        items.unshift(headers);
    }
    // Convert Object to JSON
    var jsonObject = JSON.stringify(items);

    var csv = convertToCSV(jsonObject);
    var exportedFilenmae = fileTitle + '.csv' || 'wal_export.csv';

    var blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
    if (navigator.msSaveBlob) { // IE 10+
        navigator.msSaveBlob(blob, exportedFilenmae);
    } else {
        var link = document.createElement("a");
        if (link.download !== undefined) { // feature detection
            // Browsers that support HTML5 download attribute
            var url = URL.createObjectURL(blob);
            link.setAttribute("href", url);
            link.setAttribute("download", exportedFilenmae);
            link.style.visibility = 'hidden';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
    }
}

Функция, вызываемая в строке пользовательского интерфейса 

$scope.funcExport = function (row) {
        var id = row.entity._id;//this will be used for dynamic data later
        var exportHeader = ['Licence', 'Condition'];
        var headers = {
            licence: 'Licence'.replace(/,/g, ''), // remove commas to avoid errors
            condition: "Condition"
        };
        var exportarray = [
                            { "licence": "229973", "condition": "Usage" }, 
                            { "licence": "24141", "condition": "Level" }
                          ];

        var fileTitle = 'WAL_CSV'; // or 'my-unique-title'
        exportCSVFile(headers, exportarray, fileTitle);

    }

Наконец, определение столбца пользовательского интерфейса 

{
   field: "actions", "name": "Action",                 
   cellTemplate: '<a ng-click="grid.appScope.funcExport(row)"> Download {{row.entity.LicenceType}} CSV </a>',                
   width: "170"
 }

Решение основано на Дэнни Пуле Экспорт JSON в файл CSV с использованием Javascript (в браузере).

...