고급기능 Angular를 사용하여 Excel XLSX를 가져오고 내보내는 방법
페이지 정보
작성자 GrapeCity
작성일 2022-07-29 16:06 조회 841회
댓글 0건
본문
관련링크
Excel 스프레드시트는 1980년대에 출시되어 지금도 사용 되고 있습니다. 3천만 명이 넘는 사용자 대부분이 Excel 스프레드시트 환경에 익숙합니다. 사업 구조가 단순한 많은 비즈니스에서는 예산 책정과 계획에 Excel 스프레드시트를 사용하기 시작합니다.
먼저 적은 수의 사용자가 프로세스에 포함될 수 있으며 해석하고 구성할 데이터의 양이 많지는 않을 수 있습니다. 조직이 성장함에 따라 Excel 기능에 의존하는 것이 어려울 수 있습니다.
응용 프로그램에서 스프레드시트 컴포넌트 사용의 이점
스프레드시트 컴포넌트는 개선된 보안, 데이터 병합, 향상된 데이터 시각화, 전략 성능 측정(SPM), 정교한 통계 분석 등을 제공할 수 있습니다. Excel 호환성은 수년 동안 .NET 및 JavaScript 컴포넌트의 가장 중요한 기능 중 하나였습니다.
JavaScript 컴포넌트인 는 친숙한 Excel 스프레드시트 인터페이스를 제공합니다. Excel에 의존하지 않고 JavaScript에서 Excel 파일을 가져오고 내보내고 심지어는 성능 및 비즈니스 대시보드를 빌드할 수도 있습니다.
이 문서는 Angular 환경에서 SpreadJS로 Excel 스프레드시트를 가져오고 내보내는 방법을 보여 줍니다.
다음은 Angular에서 Excel 스프레드시트를 가져오고 내보내는 단계입니다.
응용 프로그램에 SpreadJS 컴포넌트 설치
에서 샘플을 다운로드하여 다음 내용을 따라해보실 수 있습니다.
Angular CLI로 작업을 하고 있으므로 NPM에 설치되어 있는지 확인해야 합니다.
npm install -g @angular/cli
SpreadJS의 Excel 가져오기 및 내보내기 기능으로 작업을 하고 있으므로 ExcelIO 컴포넌트가 필요합니다. NPM을 사용하여 이 항목과 기본 SpreadJS 파일을 설치할 수 있습니다.
npm install @grapecity/spread-sheets @grapecity/spread-excelio @grapecity/spread-sheets-angular
SpreadJS 컴포넌트 초기화
SpreadJS는 app.component.html 페이지에 다음과 같이 추가할 수 있습니다.
<gc-spread-sheets [backColor]="spreadBackColor" [hostStyle]="hostStyle" (workbookInitialized)="workbookInit($event)"> </gc-spread-sheets>
SpreadJS 컴포넌트를 초기화하고 다음 코드로 app.component.ts 파일에서 ExcelIO 클래스의 객체를 만듭니다.
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
spreadBackColor = 'aliceblue';
hostStyle = {
width: '95vw',
height: '80vh'
};
private spread;
private excelIO;
constructor() {
this.spread = new GC.Spread.Sheets.Workbook();
this.excelIO = new Excel.IO();
}
workbookInit(args: any) {
const self = this;
self.spread = args.spread;
const sheet = self.spread.getActiveSheet();
sheet.getCell(0, 0).text('Test Excel').foreColor('blue');
sheet.getCell(1, 0).text('Test Excel').foreColor('blue');
sheet.getCell(2, 0).text('Test Excel').foreColor('blue');
sheet.getCell(3, 0).text('Test Excel').foreColor('blue');
sheet.getCell(0, 1).text('Test Excel').foreColor('blue');
sheet.getCell(1, 1).text('Test Excel').foreColor('blue');
sheet.getCell(2, 1).text('Test Excel').foreColor('blue');
sheet.getCell(3, 1).text('Test Excel').foreColor('blue');
sheet.getCell(0, 2).text('Test Excel').foreColor('blue');
sheet.getCell(1, 2).text('Test Excel').foreColor('blue');
sheet.getCell(2, 2).text('Test Excel').foreColor('blue');
sheet.getCell(3, 2).text('Test Excel').foreColor('blue');
sheet.getCell(0, 3).text('Test Excel').foreColor('blue');
sheet.getCell(1, 3).text('Test Excel').foreColor('blue');
sheet.getCell(2, 3).text('Test Excel').foreColor('blue');
sheet.getCell(3, 3).text('Test Excel').foreColor('blue');
}
XLSX 파일을 수락하는 입력 요소 만들기
가져오기를 위해 XLSX 파일을 수락하는 입력 요소를 만들겠습니다. app.component.html에서 다음 코드를 추가하겠습니다.
<div class='loadExcelInput'> <p>Open Excel File</p> <input type="file" name="files[]" multiple id="jsonFile" accept=".xlsx" (change)="onFileChange($event)" /> </div>
가져오기 코드 추가
ExcelIO 개체는 JSON에서 선택한 파일을 열고 결과를 반환합니다. 이 JSON 데이터는 SpreadJS에서 직접 해석할 수 있으므로 아래 표시된 대로 change 이벤트에 대해 onFileChange() 함수에서 가져오기 코드를 작성하겠습니다.
onFileChange(args: any) {
const self = this, file = args.srcElement && args.srcElement.files && args.srcElement.files[0];
if (self.spread && file) {
self.excelIO.open(file, (json: any) => {
self.spread.fromJSON(json, {});
setTimeout(() => {
alert('load successfully');
}, 0);
}, (error: any) => {
alert('load fail');
});
}
}내보내기 코드 추가
이와 유사하게 내보내기 기능을 처리할 버튼을 추가하겠습니다. 내보내기 버튼을 추가하려면 다음을 사용할 수 있습니다.
<div class='exportExcel'> <p>Save Excel File</p> <button (click)="onClickMe($event)">Save Excel!</button> </div>
이 버튼의 클릭 이벤트를 처리하고 코드도 작성해야 합니다. SpreadJS는 데이터를 JSON으로 저장하고 이 JSON은 BLOB로 저장하도록 ExcelIO에서 사용할 수 있습니다. 나중에 이 blob 데이터는 file-saver 컴포넌트의 saveAs() 함수에 전달해야 합니다.
onClickMe(args: any) {
const self = this;
const filename = 'exportExcel.xlsx';
const json = JSON.stringify(self.spread.toJSON());
self.excelIO.save(json, function (blob) {
saveAs(blob, filename);
}, function (error: any) {
console.log(error);
});
}내보내기 기능에 file-saver 컴포넌트를 사용했음을 기억해주시기 바랍니다. 프로젝트에 file-saver를 포함하려면 아래 단계를 따르십시오.
"npm install file-saver –save" 명령 실행
"npm install @types/file-saver –save-dev" 명령 실행
이 타사 lib를 '.angular.json'에 추가
"scripts": ["./node_modules/file-saver/FileSaver.js"]
컴포넌트 가져오기
import {saveAs} from 'file-saver';
이제 Angular에서 SpreadJS로 Excel 파일을 가져오고 내보낼 수 있습니다.
지금 바로 SpreadJS를 다운로드하여 직접 테스트해보세요!
댓글목록
등록된 댓글이 없습니다.
