خواندن فایل CSV در انگولار7
فایل 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"