Spread-sheets-io 요소

Angular에서 SpreadJS의 Excel IO 요소를 사용하면, Excel 시트를 웹페이지에 빠르게 렌더링하고 표시할 수 있으며, 가져오기 및 내보내기 작업도 간편하게 수행할 수 있습니다.

1. Angular CLI를 전역으로 설치하기

   명령 프롬프트 창을 열고 다음 명령어를 입력하세요:

   npm install -g @angular/cli

2. Angular CLI를 사용하여 새 프로젝트 생성하기

   다음 명령어로 새 프로젝트를 생성한 후, 프로젝트 디렉터리로 이동하세요:

   ng new spread-sheets-angular-cli --style css --ssr false
   cd spread-sheets-angular-cli

3. SpreadJS NPM 패키지 설치하기

   다음 명령어를 사용하여 SpreadJS NPM 패키지를 설치하세요:

   npm install @mescius/spread-sheets
   npm install @mescius/spread-sheets-angular

4. 프로젝트에 spread-sheets-io Angular 모듈과 FileSaver Angular 모듈을 설치하세요.

   다음 명령어를 사용하여 프로젝트에 spread-sheets-io및 file-saver 모듈을 설치하세요:

   npm install @mescius/spread-sheets-io
   npm install file-saver --save
   npm install @types/file-saver --save

5. SpreadJS CSS 구성하기

   아래와 같이 style.css 파일에서 SpreadJS CSS를 구성하세요:

   @import "../node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css";

6. Angular 애플리케이션에서 spread-sheets-io 사용하기

   SpreadJS 컴포넌트를 보기 위해 app.html 파일을 아래와 같이 수정하세요:

   <div>
     <input id="selectedFile" type="file" accept=".sjs, .xlsx, .ssjson" />
     <label for="exportFileType">File Type:</label>
     <select id="exportFileType">
       <option value="xlsx">Excel</option>
       <option value="ssjson">SSJson</option>
       <option value="sjs">SJS</option>
     </select>
     <button id="exportBtn">Export</button>
     <gc-spread-sheets [hostStyle]="hostStyle" (workbookInitialized)="initSpread($event)">
       <gc-worksheet></gc-worksheet> 
   </gc-spread-sheets>
   </div>

   spread-sheets-io 요소를 사용하고 SpreadJS 컴포넌트를 위한 데이터를 준비하기 위해 app.ts 파일을 아래와 같이 수정하세요:

   import { Component, enableProdMode } from "@angular/core";
   import { bootstrapApplication, BrowserModule } from '@angular/platform-browser';
   import { SpreadSheetsModule } from "@mescius/spread-sheets-angular";
   import GC from "@mescius/spread-sheets";
   import "@mescius/spread-sheets-io";
   import { saveAs } from "file-saver";
   @Component({
     selector: "app-root",
     templateUrl: "app.html",
     standalone: true,
     imports: [SpreadSheetsModule, BrowserModule],
   })
   export class App {
     autoGenerateColumns = false;
     spread!: GC.Spread.Sheets.Workbook;
     hostStyle = {
       width: "100%",
       height: "600px",
     };
     constructor() { }
     fileTypeMap = { sjs: "sjs", xlsx: "xlsx", ssjson: "ssjson" };
     initSpread($event: any) {
       this.spread = $event.spread;
       let spread = this.spread;
       let sheet = spread.getActiveSheet();
       sheet.setValue(0, 0, "Hello World!");
       document.getElementById("selectedFile")!.addEventListener("change", (e) =>
         this.loadFile((e as any).target.files[0])
       );
       document.getElementById("exportBtn")!.addEventListener("click", () => {
         this.exportFile();
       });
     }
     getFileType(fileName: String) {
       // console.log( fileName);
       return fileName.split(".").pop();
     }
     loadFile(file: any) {
       const type = this.getFileType(file.name);
       const fileType =
         type === "xlsx"
           ? GC.Spread.Sheets.FileType.excel
           : GC.Spread.Sheets.FileType.ssjson;
       if (type === this.fileTypeMap.sjs) {
         this.spread.open(
           file,
           () => console.log("SJS File Loaded"),
           console.error
         );
       } else if (
         ([this.fileTypeMap.xlsx, this.fileTypeMap.ssjson] as any).includes(type)
       ) {
         this.spread.import(
           file,
           () => console.log("File Loaded"),
           console.error,
           { fileType }
         );
       } else {
         console.error("Unsupported file type");
       }
     }
     exportFile() {
       const type = (document.getElementById("exportFileType") as any).value;
       const fileName = `export.${type}`;
       const fileType =
         type === "xlsx"
           ? GC.Spread.Sheets.FileType.excel
           : GC.Spread.Sheets.FileType.ssjson;
       if (type === this.fileTypeMap.sjs) {
         this.spread.save((blob: any) => saveAs(blob, fileName), console.error);
       } else if (
         type === this.fileTypeMap.xlsx ||
         type === this.fileTypeMap.ssjson
       ) {
         this.spread.export((blob: any) => saveAs(blob, fileName), console.error, {
           fileType,
         });
       }
     }
   }
   enableProdMode();
   bootstrapApplication(App);

   index.html 파일을 수정하여 아래와 같이 <head> 섹션에 FileSaver 스크립트 파일을 포함하십시오.

   <script src="https://developer.mescius.com/spreadjs/demos/spread/source/js/FileSaver.js" type="text/javascript"></script>

7. 프로젝트를 빌드하고 실행하세요.

   다음 명령어로 새 프로젝트를 빌드하고 실행하세요:

   ng serve