Angular로 CSV 파일을 업로드하고 다운로드하는 방법

시작하기 전에 새 각도 환경을 설정하고 초기 애플리케이션으로 새 작업 공간을 만들고 서빙을 시작해야합니다. Angular App의 보일러 플레이트를 만들기위한 단계별 안내서는 공식 자습서에서 찾을 수 있습니다.

먼저, 직원을 모델링하기 위해 간단한 클래스를 만들어 봅시다. 이 모델은 각도 구성 요소에 의해 소비됩니다.

직원 세부 정보를 보유하기위한 모델은 다음과 같습니다. 이것은 직원의 이름, 이메일 및 도시를 가진 기본 모델 일뿐입니다. 

Root<br>-- src<br>---- app<br>------ app-routing.module.ts<br>------ app.component.css<br>------ app.component.html<br>------ app.component.ts<br>------ app.module.ts<br>---- models<br>---- services<br>------ csv.services.ts<br>---- index.html<br>---- main.ts<br>---- styles.css<br>

Angular 응용 분야에는 모듈 식 구조가 있습니다. 이로 인해 응용 프로그램이 강력하고 유지 관리가 쉽습니다. 각도 응용 프로그램의 주요 규칙 중 하나는 구성 요소가 데이터를 직접 저장하거나 가져 오도록 허용해서는 안된다는 것입니다. 그렇기 때문에 데이터에 액세스하고 제시하기 위해

서비스 파일은

서비스가 생성되면 모든 구성 요소에 주입 할 수 있습니다. a & lt; a & gt; a & gt;

export class User {<br>  name: string;<br>  email: string;<br>  city: string;<br>}<br>

. 입력 태그에는 [accept]

와 같은 속성이 제공됩니다. [accept] 는 (change)

이어야합니다.

파일에서 텍스트 () . 파일을 읽는 방법은 비동기식이어야하므로 Async 를 사용하는 이유를 기억하십시오.  CSV 파일에서 텍스트를 읽기위한 간단한 코드 조각은 다음과 같습니다. CSV 파일에서 텍스트 콘텐츠가 추출되면 2 단계에서 정의 된 서비스를 사용할 수 있으며 위의 함수는 app.component.html. 전체 응용 프로그램을 통합 이제 app.module.ts 를 빌드 할 때입니다. 모든 공급자, 수입, 선언 및 부트 스트랩 구성 요소가 등록되는 곳입니다.  이 변경 사항을 사용하면 다음 화면을 볼 수 있습니다. 라이브 데모

Codepen에서 ddev (@divyaddev)에 의해 펜 JavaScript Infinite 스크롤을 참조하십시오.

이 게시물에서 CSV 데이터를 업로드하고 다운로드하는 방법을 보았습니다.