Angular 2 скачать данные ответа json из getList () в формате csv или Excel - PullRequest
Новая
       34

Angular 2 скачать данные ответа json из getList () в формате csv или Excel

0 голосов
/ 24 июня 2019

Конечная игра проста, мое приложение Angular получает и генерирует список записей данных в представлении с именем customers-list.component.html, например: 

Name:  Olivia
Age:  23
Active:  true

----------------
Name:  Julia
Age:  22
Active:  true

----------------
Name:  Wes
Age:  23
Active:  true

----------------
Name:  Gabe
Age:  24
Active:  false

Я хочу иметь возможность загрузить .csv файл указанных записей данных.

В customers-list.component.ts я попробовал эту функцию getcsvFile(), определил данные, которые передаются через service.ts, определил новую функцию Blob() и использовал JSON.stringify(data) и передал в getCustomersList() данные и сохраните их как .csv: 

export class CustomersListComponent implements OnInit {

  customers: Observable<Customer[]>;

  constructor(private customerService: CustomerService) { }
...... 
 getcsvFile() {

      this.customers = this.customerService.getCustomersList();
      let file = new Blob([JSON.stringify(this.customers)], { type: 'data:application/csv;charset=utf-8,content_encoded_as_url' });
      saveAs(file, 'customerList.csv')
    }

}

Вот сервис .ts: 

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class CustomerService {

  private baseUrl = 'http://localhost:8000/customers';

  constructor(private http: HttpClient) { }
.........
  getCustomersList(): Observable<any> {
    return this.http.get(`${this.baseUrl}/`);
  }
}

но когда я загружаю CSV-файл и открываю его, я не вижу фактических данных, которые были введены, а скорее всей этой странной информации, которая все еще находится в формате json: 

{
"_isScalar":false,
"source":{"_isScalar":false,
"source":{"_isScalar":false,
"source":{"_isScalar":true,
"value":{"url":"http://localhost:8000/customers/",
"body":null,"reportProgress":false,
"withCredentials":false,
"responseType":"json",
"method":"GET",
"headers":{"normalizedNames":{},
"lazyUpdate":null,"headers":{}},
"params":{"updates":null,
"cloneFrom":null,"encoder":{},
"map":null},
"urlWithParams":"http://localhost:8000/customers/"}},
"operator":{"concurrent":1}},
"operator":{}},
"operator":{}
}

когда я хочу увидеть что-то ближе к этому: 

[
{"id": 2, "name": "Olivia", "age": 23, "active": true}, 
{"id": 3, "name": "Julia", "age": 22, "active": true}, 
{"id": 4, "name": "Wes", "age": 23, "active": true}, 
{"id": 5, "name": "Gabe", "age": 24, "active": false}
]

Чего мне не хватает?

1 Ответ

1 голос
/ 24 июня 2019

Было бы интересно посмотреть, что делает ваша функция saveAs, но в любом случае, если вы не хотите устанавливать модуль, вы можете легко сделать это самостоятельно. 

  // Download CSV
download(data: any, filename: string, columns: string, header: string, delimiter: string | undefined) {
  const csvData = this.convertToCSV(data, columns, header, delimiter);
  const link: any = document.createElement('a');
  link.setAttribute('style', 'display:none;');
  document.body.appendChild(link);
  const blob = new Blob([csvData], {type: 'text/csv'});
  link.href = window.URL.createObjectURL(blob);

  const isIE = !!(<any> document).documentMode;

  if (isIE) {
    navigator.msSaveBlob(blob, filename + '.csv');
  } else {
    link.download = filename + '.csv';
  }
  link.click();
  link.remove();
}

и преобразовать свой JSONв CSV, вы можете сделать это так: 

/**
 * exports json (array) data to CSV
 * @param data
 * @param {string} columns
 * @param {string} header
 * @param {string | undefined} delimiter
 * @returns {string}
  */
  convertToCSV(data: any, columns: string, header: string, delimiter: string | 
undefined) {
  let row = '';
  const del = delimiter ? delimiter : ';';
  const head = header.split(del);
  const col = columns.split(del);

  // creating the header
  for (const headerTxt of head) {
    row += headerTxt + del;
  }
  row += '\r\n';
  //  start with the rows
  for (const dataset of data) {
    let line = '';
    for (let i = 0; i < col.length; i++) {
      let dataToAdd = dataset[col[i]];
      if (dataset[col[i]] == null || dataset[col[i]] === undefined) {
        dataToAdd = '';
      }
      line += '"' + dataToAdd + '"' + del;
    }
    row += line + '\r\n';
  }
  return row;
}

, так что в вашем случае вы, скорее всего, назвали бы это так: 

download(this.customers, 'customer', 
'id,name,age,active', 
'ID,Name,Age,Active', ',')

Надеюсь, что поможет:)

Редактировать:

Понятно, вы не подписываетесь на свою заметку, скорее всего, это ошибка.Попробуйте это: 

 getcsvFile() {

    this.customerService.getCustomersList()
     .pipe(take(1)) // <-- HERE 
     .subscribe(customers=>{ // <-- AND HERE
      if (customers) {
        download(customers, 'customer','id,name,age,active','ID,Name,Age,Active', ',');
      }
   });

}

Привет

...