فایل CSV در انگولار7

تعداد زیادی کتابخانه های CSV reader برای Angular 7 وجود دارد، اما ما فایل CSV را بدون هیچ کتابخانه ای در این مقاله می خوانیم و یک فایل CSV از UI rather را به جای یک مسیر یا منبع static آپلود می کنیم تا آن را پویا کنیم.

 فایل CSV در Angular 7

تعداد زیادی کتابخانه های CSV reader برای Angular 7 وجود دارد، اما ما فایل CSV را بدون هیچ کتابخانه ای در این مقاله می خوانیم و یک فایل CSV از UI rather را به جای یک مسیر یا منبع static آپلود می کنیم تا آن را پویا کنیم.

پیش نیازها:

• آشنایی با انگولار7
• Visual Studio Code
• نصب Angular CLI
• نصب NodeJS

ایجاد  فایل CSV در Angular 7

Visual Studio Code را باز کنید و یک terminal جدید بسازید:

دستور زیر را در آن بنویسید:

ng new Angular7-readCSV  

به فولدر root بروید، برای  Angular routing، yes و برای CSS، stylesheet انتخاب کنید.

پروژه را در Visual Studio Code باز کنید و فولدر را با دستور زیر باز کنید:

code .  

یک فایل جدید به نام CSVRecord در فولدر app ایجاد کنید و کد زیر را در آن قرار دهید:

export class CSVRecord {  
    public id: any;  
    public firstName: any;  
    public lastName: any;  
    public age: any;  
    public position: any;  
    public mobile: any;     
  }  

فایل "app.component.html" را باز کنید و کد 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>FirstName </th>    
      <th>LastName </th>    
      <th>Age </th>    
      <th>Position </th>    
      <th>Mobile </th>    
    </tr>    
  </thead>    
  <tbody>    
    <tr *ngFor="let record of records;let i = index;">    
      <td> <span>{{record.id}}</span> </td>    
      <td> <span>{{record.firstName}}</span> </td>    
      <td> <span>{{record.lastName}}</span> </td>    
      <td> <span>{{record.age}}</span> </td>    
      <td> <span>{{record.position}}</span> </td>    
      <td> <span>{{record.mobile}}</span> </td>    
    </tr>    
  </tbody>    
</table>     

اکنون، فایل "app.component.ts" را باز کنید تا منطق اصلی خود را که فایل CSV است را بخواند و داده های فایل را در جدول تولید کند.

import { Component, ViewChild } from '@angular/core';  
import { CSVRecord } from './CSVModel';  
  
@Component({  
  selector: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.css']  
})  
  
export class AppComponent {  
  title = 'Angular7-readCSV';  
  
  public records: any[] = [];  
  @ViewChild('csvReader') csvReader: any;  
  
  uploadListener($event: any): void {  
  
    let text = [];  
    let files = $event.srcElement.files;  
  
    if (this.isValidCSVFile(files[0])) {  
  
      let input = $event.target;  
      let reader = new FileReader();  
      reader.readAsText(input.files[0]);  
  
      reader.onload = () => {  
        let csvData = reader.result;  
        let csvRecordsArray = (<string>csvData).split(/\r\n|\n/);  
  
        let headersRow = this.getHeaderArray(csvRecordsArray);  
  
        this.records = this.getDataRecordsArrayFromCSVFile(csvRecordsArray, headersRow.length);  
      };  
  
      reader.onerror = function () {  
        console.log('error is occured while reading file!');  
      };  
  
    } else {  
      alert("Please import valid .csv file.");  
      this.fileReset();  
    }  
  }  
  
  getDataRecordsArrayFromCSVFile(csvRecordsArray: any, headerLength: any) {  
    let csvArr = [];  
  
    for (let i = 1; i < csvRecordsArray.length; i++) {  
      let curruntRecord = (<string>csvRecordsArray[i]).split(',');  
      if (curruntRecord.length == headerLength) {  
        let csvRecord: CSVRecord = new CSVRecord();  
        csvRecord.id = curruntRecord[0].trim();  
        csvRecord.firstName = curruntRecord[1].trim();  
        csvRecord.lastName = curruntRecord[2].trim();  
        csvRecord.age = curruntRecord[3].trim();  
        csvRecord.position = curruntRecord[4].trim();  
        csvRecord.mobile = curruntRecord[5].trim();  
        csvArr.push(csvRecord);  
      }  
    }  
    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.css" را باز کنید و کدهای css را در آن وارد کنید:

table.minimalistBlack {  
    border: 3px solid #000;  
    width: 100%;  
    text-align: left;  
    border-collapse: collapse  
}  
  
table.minimalistBlack td,  
table.minimalistBlack th {  
    border: 1px solid #000;  
    padding: 5px 4px  
}  
  
table.minimalistBlack tbody td {  
    font-size: 13px  
}  
  
table.minimalistBlack thead {  
    background: #cfcfcf;  
    background: -moz-linear-gradient(top, #dbdbdb 0, #d3d3d3 66%, #cfcfcf 100%);  
    background: -webkit-linear-gradient(top, #dbdbdb 0, #d3d3d3 66%, #cfcfcf 100%);  
    background: linear-gradient(to bottom, #dbdbdb 0, #d3d3d3 66%, #cfcfcf 100%);  
    border-bottom: 3px solid #000  
}  
  
table.minimalistBlack thead th {  
    font-size: 15px;  
    font-weight: 700;  
    color: #000;  
    text-align: left  
}  
  
table.minimalistBlack tfoot {  
    font-size: 14px;  
    font-weight: 700;  
    color: #000;  
    border-top: 3px solid #000  
}  
  
table.minimalistBlack tfoot td {  
    font-size: 14px  
}  

دستور ng serve را وارد کنید و نتیجه را مشاهده کنید:

لطفا راجع به این مقاله نظرات خود را با ما در میان بگذارید و اگر پیشنهادی دارید حتما آنرا مطرح کنید. 

منبع: c-sharpcorner

"با تشکر – مجموعه ABLY"