Angular에서 Excel로 데이터 내보내기
이 기사에서는 Angular에서 Excel로 데이터를 내보내는 방법에 대해 설명합니다.
Angular에서 Excel로 데이터 내보내기
Angular 애플리케이션에서 내보내기 기능을 사용해야 하는 상황이 많이 있습니다. 고객이나 클라이언트가 테이블에서 Excel 시트로 또는 JSON에서 Excel 시트로 데이터를 내보낼 수 있도록 애플리케이션의 버튼으로 옵션을 제공할 수 있습니다.
이 튜토리얼에서는 예제를 통해 애플리케이션에서 Excel 형식으로 데이터를 내보내는 방법에 대해 설명합니다. 이를 위해 JSON 데이터를 Excel 형식으로 변환하는 옵션을 제공하는 Angular의 xlsx 라이브러리를 사용할 수 있습니다.
연도의 날씨 계절에 대한 JSON 데이터를 생성하는 예를 살펴보겠습니다. 먼저 시스템에 Angular CLI를 설치해야 합니다.
먼저 명령줄에서 다음 명령을 실행하여 Angular에서 새 프로젝트를 만듭니다.
ng new angular-app
새 응용 프로그램이 성공적으로 생성되면 다음 명령을 사용하여 응용 프로그램 폴더로 이동합니다.
cd ./angular-app
npm 모듈을 사용하여 xlsx 라이브러리를 설치합니다. 우리는 그것을 설치하기 위해 다음 명령을 사용할 것입니다.
npm i xlsx --save
이제 1년의 날씨 시즌 더미 목록을 만듭니다. 이 예제에서는 더미 JSON 데이터를 생성하지만 데이터베이스나 일부 API를 통해 가져올 수 있습니다.
더미 데이터는 아래와 같습니다.
Seasons = [
{ "id": 1,
"name": "Spring",
"Fruit": "Orange" },
{ "id": 2,
"name": "Summer",
"Fruit": "Mango"},
{ "id": 3,
"name": "Winter",
"Fruit": "Apple"},
{ "id": 4,
"name": "Autumn",
"Fruit": "Banana"}]
이제 JSON 데이터를 표시할 테이블을 생성할 프론트엔드 애플리케이션을 생성합니다. app.component.html 파일의 업데이트된 코드는 아래와 같습니다.
<div>
<button (click)="exportToExcel()">Export to Excel</button>
<table id="season-tble">
<tr>
<th>Id</th>
<th>name</th>
<th>Fruit</th>
</tr>
<tr *ngFor="let season of Seasons">
<td>{{ season.id }}</td>
<td>{{ season.name }}</td>
<td>{{ season.fruit }}</td>
</tr>
</table>
</div>
이제 아래와 같이 app.component.ts 파일에 데이터를 Excel 형식으로 내보내는 함수를 만듭니다.
import { Component, VERSION } from '@angular/core';
import * as XLSX from 'xlsx';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
Seasons = [
{ id: 1, name: 'Spring', fruit: 'Orange' },
{ id: 2, name: 'Summer', fruit: 'Mango' },
{ id: 3, name: 'Winter', fruit: 'Apple' },
{ id: 4, name: 'Autumn', fruit: 'Banana' },
];
name = 'ExcelSheet.xlsx';
exportToExcel(): void {
let element = document.getElementById('season-tble');
const worksheet: XLSX.WorkSheet = XLSX.utils.table_to_sheet(element);
const book: XLSX.WorkBook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(book, worksheet, 'Sheet1');
XLSX.writeFile(book, this.name);
}
}
아래와 같이 프론트 엔드를 보기 좋게 만들기 위해 몇 가지 CSS 코드를 추가합니다.
td{
border: 1px solid black;
padding: 10px;
}
button{
background: black;
padding: 10px;
color: white;
margin-bottom: 50px;
}
이제 아래 표시된 명령으로 응용 프로그램을 실행합니다.
npm start
출력:
이제 내보내기 버튼을 클릭하고 프로그램이 작동하는지 확인합니다. 버튼을 클릭하면 아래와 같이 저장한 이름의 파일이 다운로드 됩니다.
이제 이 파일을 열어서 아래와 같이 어떻게 보이는지 확인해 봅시다.
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn