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

데이터 세트는 API 모델 및 다양한 비즈니스 프로세스를 구축하는 데 매우 필수적입니다. 그렇기 때문에 CSV 가져 오기 및 내보내기가 종종 필요한 기능인 이유입니다.

이 튜토리얼에서는 각도 앱 내에서 CSV 파일을 다운로드하여 가져 오는 방법을 배웁니다. 직원 세부 정보가 포함 된 CSV 파일로 작업 할 것입니다. 코드는 TypeScript로 작성됩니다. 

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

다음은 Boilerplate 응용 프로그램의 폴더 구조입니다. 간단한 모델을 만들

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

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

2. 서비스를 구축하십시오.

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

서비스를 사용해야합니다. 사용 사례에서는 CSV 데이터를 다운로드하고 가져 오기위한 서비스가 필요합니다.

서비스 파일은

csv.services.ts 입니다. 

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

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

의 형태로 파일의 내용을 가져 오는 함수를 만들기 전에 데이터를 설정하십시오 : 텍스트/csv

. 입력 태그에는 [accept]

및 type

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

이어야합니다.

는 파일의 내용과 함께

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

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

결론

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

위 내용은 Angular로 CSV 파일을 업로드하고 다운로드하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!