Как отобразить файл CSV в Angular без каких-либо элементов управления вводом - PullRequest
Новая
       71

Как отобразить файл CSV в Angular без каких-либо элементов управления вводом

0 голосов
/ 16 января 2020

Я хочу отобразить файл CSV по умолчанию в Angular, когда вызывается onInit () (без использования какого-либо элемента управления вводом). Какое изменение мне нужно сделать в приведенном ниже коде , поскольку я использовал элемент управления вводом, который отображает выбранный конкретный файл CSV, вместо Я хочу отображать файл * stati c CSV, когда страница инициализирована.

Мой app.component.ts 

import { Component, ViewChild } from '@angular/core';
import { csvdata1 } from './csvdata';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'csvfetch';

  public records: any[] = [];

  @ViewChild('csvReader', {static: false}) csvReader: any;  


  uploadListener($event: any): void {
    const text = [];
    const files = $event.srcElement.files;

    if (this.isValidCSVFile(files[0])) {
      const input = $event.target;
      const reader = new FileReader();
      reader.readAsText(input.files[0]);

      reader.onload = () => {
        const csvData = reader.result;
        const csvRecordArray = ( csvData as string).split(/\r\n|\n/);
        const headerRow = this.getHeaderArray(csvRecordArray);

        this.records = this.getDataArrayFromCSVFile(csvRecordArray, headerRow.length);
      };

      reader.onerror = function() {
        console.log('error is occured while reading file!');
      };

    } else {
      alert('Please import valid .csv file.');
      this.fileReset();
    }

  }

  getDataArrayFromCSVFile(csvRecordArray: any, headerLength: any) {
    let csvArr = [];

    for (let i = 1; i < csvRecordArray.length; i++) {
      const currentRecord = ( csvRecordArray[i] as string).split(',');

      if (currentRecord.length == headerLength) {
          // tslint:disable-next-line: new-parens
          let csvdata: csvdata1 = new csvdata1();
          csvdata.user_id = currentRecord[0].trim();
          csvdata.username = currentRecord[1].trim();
          csvdata.first_name = currentRecord[2].trim();
          csvdata.last_name = currentRecord[3].trim();
          csvdata.gender = currentRecord[4].trim();
          csvdata.password = currentRecord[5].trim();
          csvdata.status = currentRecord[6].trim();
          csvArr.push(csvdata);
      }
    }
    return csvArr;
  }

  isValidCSVFile(file: any) {
    return file.name.endsWith('.csv');
  }

  getHeaderArray(csvRecordsArr: any) {
    let headers = (<string> csvRecordsArr[0]).split(',');

    let headerArray = [];

    for(let j = 0; j < headers.length; j++) {
      headerArray.push(headers[j]);
    }
    return headerArray;
  }
  fileReset() {

    this.csvReader.nativeElement.value = '';
    this.records = [];
  }
}

Мой app.component. html

<input type="file" #csvReader name="Upload CSV" id="txtFileUpload" (change)="uploadListener($event)" accept=".csv" />

<table class="minimalistBlack" *ngIf="records.length > 0">   
  <thead>    
    <tr>    
      <th>ID </th>
      <th>Username</th>    
      <th>FirstName </th>     
      <th>LastName</th>
      <th>Gender</th>    
      <th>Password</th>    
      <th>Status</th>    

    </tr>    
  </thead>    
  <tbody>    
    <tr *ngFor="let record of records;let i = index;">    
      <td> <span>{{record.user_id}}</span> </td>    
      <td> <span>{{record.username}}</span> </td>    
      <td> <span>{{record.first_name}}</span> </td>    
      <td> <span>{{record.last_name}}</span> </td>    
      <td> <span>{{record.gender}}</span> </td>    
      <td> <span>{{record.password}}</span> </td>    
      <td> <span>{{record.status}}</span> </td>    
    </tr>    
  </tbody>    
</table>

1 Ответ

0 голосов
/ 16 января 2020

Вам нужно сохранить файл CSV в папке src/app/assets и загрузить его по HTTP-запросу get. Для этого

  1. Скопируйте ваш файл data.csv (data.csv - имя примера) в src/app/assets папку
  2. В вашем angular.json добавьте { "glob": "data.csv", "input": "./", "output": "./assets/" } в массиве assets. Это должно выглядеть следующим образом: 
     "assets": [
              "src/favicon.ico",
              "src/assets",
              { "glob": "data.csv", "input": "./", "output": "./assets/" }
            ],

Теперь запустите ng serve и в вашем браузере http://localhost: ссылка 4200 / assets / data.csv загрузит data.csv файл.

Добавить HTTP-клиент в ваше приложение в соответствии с do c https://angular.io/guide/http

В вашем классе обслуживания HTTP вы должны установить заголовки для получения файла CSV. Он должен выглядеть следующим образом: 

fetchCSV(): Observable<ArrayBuffer> {
    let headers = new HttpHeaders();

    const options: {
        headers?: HttpHeaders;
        observe?: 'body';
        params?: HttpParams;
        reportProgress?: boolean;
        responseType: 'arraybuffer';
        withCredentials?: boolean;
    } = {
        responseType: 'arraybuffer'
    };

    return this.http
        .get('http://localhost:4200/assets/data.csv', options)
        .pipe(
            map((file: ArrayBuffer) => {
                return file;
            })
        );
}

и метод вызова из контроллеров onInit 

    this.httpService.fetchCSV().subscribe((data: any) => {
      const blob = new Blob([data], { type: 'application/octet-stream' });
      const fileName = 'data.csv';
      saveAs(blob, fileName); // save file from blob
  })

Обратите внимание, что this.httpService необходимо создать на шаге 3 .

...