Как экспортировать данные ответов JSON в Angular 7 - PullRequest
Новая
       5

Как экспортировать данные ответов JSON в Angular 7

1 голос
/ 16 апреля 2019

У меня есть JSON Response от API.Я хочу экспортировать его в лист Excel в формате CSV.

JSON Response: 

[
  {
    "id": 13,
    "context": "http://tempurl.org",
    "details": [
      {
        "name": "test1"
      },
      {
        "name": "test2"
      }
    ],
    "username": "testuser1",
    "custName": "cap1"
  },
  {
    "id": 14,
    "context": "http://tempurl.org",
    "details": [],
    "username": "testuser2",
    "custName": "cap2"
  }
]

Вот данные CSV, которые мы должны получить после открытия при нажатии кнопки экспорта: 

id      context               username        custName      name
13      http://tempurl.org    testuser1       cap1          test1
13      http://tempurl.org    testuser1       cap1          test2
14      http://tempurl.org    testuser2       cap2

Ранее я использовалgridApi, который делал загрузку CSV, но он работает только для видимой таблицы, данные которой мы хотим экспортировать.Но не для JSON, как в моем случае.

Не существует надлежащего учебного пособия для последней угловой версии 7, которая поможет мне понять, как это сделать.

Ответы [ 3 ]

1 голос
/ 16 апреля 2019

Нет необходимости устанавливать какие-либо внешние библиотеки или зависимости.Все это можно сделать с помощью Vanilla JavaScript / TypeScript на вашем component.ts.

Первая строка в вашем CSV-файле всегда будет заголовком.

Последующие строки будут представлять каждую строку данных в строке CSV.Следовательно, formattedData представляет обработку yourData для отдельных строк, и каждая «строка» представляется массивом.

После чего вы используете Array.join() для преобразования массива в соответствующую строку.значение, разделенное запятой. 

this.yourData = [{"id":13,"context":"http:\/\/tempurl.org","details":[{"name":"test1"},{"name":"test2"}],"username":"testuser1","custName":"cap1"},{"id":14,"context":"http:\/\/tempurl.org","details":[],"username":"testuser2","custName":"cap2"}];

exportData() {
  let currentRow = [];
  const csvHeader = ['id', 'context', 'username', 'custName', 'name'];

  const formattedData = this.yourData.map(row => {
    // do the rest here
    return currentRow;
  });
  let csvContent = 'data:text/csv;charset=utf-8,';

  formattedData.unshift(csvHeader);
  formattedData.forEach(rowArray => {
    const row = rowArray.join(',');
    csvContent += row + '\r\n';
  });

  const encodedUri = encodeURI(csvContent);
  window.open(encodedUri);

}
1 голос
/ 16 апреля 2019

Вы должны создать JSON так, как хотите в Excel.а затем установите xlsx и file-saver в вашем приложении.

npm install xlsx

npm install file-saver

После этого использования ниже сервиса у этого сервиса есть два метода: один для экспорта JSON в Excel и второй для таблицы в Excel. 

import { Injectable } from '@angular/core';
import * as FileSaver from 'file-saver';
import * as XLSX from 'xlsx';
const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
const EXCEL_EXTENSION = '.xlsx';
@Injectable()
export class ExcelService {
  constructor() { }
  public exportJsonAsExcelFile(json: any[], excelFileName: string): void {
    const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json);
    const workbook: XLSX.WorkBook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
    const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
    this.saveAsExcelFile(excelBuffer, excelFileName);
  }
  public exportTableAsExcelFile(table: HTMLElement, excelFileName: string): void {
    const worksheet: XLSX.WorkSheet = XLSX.utils.table_to_sheet(table);
    const workbook: XLSX.WorkBook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
    const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
    this.saveAsExcelFile(excelBuffer, excelFileName);
  }
  private saveAsExcelFile(buffer: any, fileName: string): void {
    const data: Blob = new Blob([buffer], { type: EXCEL_TYPE });
    FileSaver.saveAs(data, fileName + new Date().getTime() + EXCEL_EXTENSION);
  }
}
0 голосов
/ 16 апреля 2019

Вы можете использовать объединение ваших данных в CSV-контент и загрузить его, используя URL.createObjectURL

download() {
    let fileName = 'download.csv';
    let columnNames = ["id", "context", "username", "custName"];
    let header = columnNames.join(',');

    let csv = header;
    csv += '\r\n';

    this.data.map(c => {
      csv += [c["id"], c["context"], c["username"], c["custName"]].join(',');
      csv += '\r\n';
    })

    var blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });

    var link = document.createElement("a");
    if (link.download !== undefined) {
      var url = URL.createObjectURL(blob);
      link.setAttribute("href", url);
      link.setAttribute("download", fileName);
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  }

Демо: https://stackblitz.com/edit/angular-download-csv2

...