Angular 스프레드시트 만들기
페이지 정보
작성자 GrapeCity
작성일 2021-04-09 10:37 조회 2,389회
댓글 0건
본문
관련링크
SpreadJS를 사용해 Angular에 Excel 스프레드시트를 만드는 방법을 자세히 설명하는 자습서를 만들었습니다.
프로젝트 설정
먼저 Excel 스프레드시트에 추가할 Angular 프로젝트를 설정해야 합니다. 이 자습서에서는 Angular 10 프로젝트를 사용하겠습니다.
1. ng new 프로젝트 이름을 사용해 새로운 Angular 10 프로젝트를 만듭니다. 이 예시에서는 프로젝트 이름을 spreadJS-angular로 지정하겠습니다.
ng new spreadJS-angular
2. 이제 디렉터리를 새 프로젝트로 변경합니다.
cd spreadJS-angular
3. 다음과 같이 프로젝트를 실행합니다.
ng serve –open
Angular 10 시작 페이지가 이제 http://localhost:4200/으로 제공되고 있습니다.
SpreadJS를 Angular 프로젝트에 추가:
Angular 10 프로젝트를 시작하여 실행하였으므로 이제 시작 페이지 콘텐츠를 제거하고 SpreadJS를 프로젝트에 추가하여 Angular 스프레드시트를 만들겠습니다.
1. 다음과 같이 npm 패키지를 사용해 SpreadJS를 설치합니다.
npm install @grapecity/spread-sheets npm install @grapecity/spread-sheets-angular
2. 아래와 같이 angular.json에서 SpreadJS의 CSS를 구성합니다.
{
...
"projects":{
"spread-sheets-angular-cli":{
...
"architect":{
...
"build":{
...
options:{
...
"styles": [
"[node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016darkGray.css](mailto:node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016darkGray.css)"
],
...
}
...
}
...
}
...
}
}
...
}1. 이제 응용 프로그램에서 SpreadJS를 사용해 보겠습니다. SpreadJS 모듈을 가져오기 위해 module.ts를 수정합니다.
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { SpreadSheetsModule } from "@grapecity/spread-sheets-angular";
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, SpreadSheetsModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}2. 다음과 같이 SpreadJS 컴포넌트를 보기 위해 component.html을 수정합니다.
<gc-spread-sheets
[backColor]="spreadBackColor"
[hostStyle]="hostStyle"
(workbookInitialized)="workbookInit($event)"
>
<gc-worksheet [name]="sheetName" [dataSource]="data">
<gc-column dataField="Name" width="300"></gc-column>
<gc-column dataField="Category" [width]="columnWidth"></gc-column>
<gc-column
dataField="Price"
[width]="columnWidth"
formatter="$ #.00"
></gc-column>
<gc-column dataField="Shopping Place" [width]="columnWidth"></gc-column>
</gc-worksheet>
</gc-spread-sheets>3. 다음과 같이 SpreadJS 컴포넌트에 맞춰 데이터를 준비하기 위해 component.ts를 수정합니다.
import { Component } from "@angular/core";
import * as GC from "@grapecity/spread-sheets";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
})
export class AppComponent {
spreadBackColor = "aliceblue";
sheetName = "Goods List";
hostStyle = {
width: "800px",
height: "600px",
};
data = [
{
Name: "Apple",
Category: "Fruit",
Price: 1,
"Shopping Place": "Wal-Mart",
},
{
Name: "Potato",
Category: "Fruit",
Price: 2.01,
"Shopping Place": "Other",
},
{
Name: "Tomato",
Category: "Vegetable",
Price: 3.21,
"Shopping Place": "Other",
},
{
Name: "Sandwich",
Category: "Food",
Price: 2,
"Shopping Place": "Wal-Mart",
},
{
Name: "Hamburger",
Category: "Food",
Price: 2,
"Shopping Place": "Wal-Mart",
},
{
Name: "Grape",
Category: "Fruit",
Price: 4,
"Shopping Place": "Sun Store",
},
];
columnWidth = 100;
workbookInit(args) {
let spread: GC.Spread.Sheets.Workbook = args.spread;
let sheet = spread.getActiveSheet();
sheet.getCell(0, 0).text("My SpreadJS Angular Project").foreColor("blue");
}
}브라우저에서 http://localhost:4200/으로 이동하면 다음과 같이 SpreadJS 컴포넌트가 항목 목록과 함께 표시됩니다.
참고: 다음과 같은 오류가 표시되는 경우:
이러한 오류는 Angular 래퍼 TypeScript 소스 파일을 프로젝트로 복사한 후 파일 모듈로 참조하여 수정할 수 있습니다.
다음 단계를 따르시면 됩니다.
npm를 설치합니다.
spread.sheets.angular.ts*(이 파일만)**를 _nodemodules/@grapecity/spread-sheets-angular* 폴더에서 src/component/spread-sheets-angular 폴더로 복사합니다.
다음과 같이 module.ts를 수정합니다.
// import { SpreadSheetsModule } from "@grapecity/spread-sheets-angular"; import { SpreadSheetsModule } from "../component/spread-sheets-angular/gc.spread.sheets.angular";
이제 오류가 보이지 않습니다!
최신 SpreadJS 릴리스 평가판을 다운로드하여 Angular 프레임워크에 대한 지원이 포함된 SpreadJS를 얻을 수 있습니다. 궁금한 점은 한국의 GrapeCity의 기술 관련 팀이 해결해 드립니다.
댓글목록
등록된 댓글이 없습니다.
