Angular Spreadsheet Activation

Angular Spreadsheet 구성 요소는 컨트롤에서 현재 활성화된 셀, 창 및 워크시트를 확인할 수 있는 속성을 노출합니다. 이는 사용자가 컨트롤에서 탐색하거나 편집할 수 있는 위치를 확인하는 데 도움이 되므로 유용합니다.

Angular Spreadsheet Activation Example

EXAMPLE

DATA

MODULES

TS

HTML

SCSS

import { saveAs } from "file-saver";
import { Workbook } from "igniteui-angular-excel";
import { WorkbookFormat } from "igniteui-angular-excel";
import { WorkbookSaveOptions } from "igniteui-angular-excel";

export class ExcelUtility {
    public static getExtension(format: WorkbookFormat) {
        switch (format) {
            case WorkbookFormat.StrictOpenXml:
            case WorkbookFormat.Excel2007:
                return ".xlsx";
            case WorkbookFormat.Excel2007MacroEnabled:
                return ".xlsm";
            case WorkbookFormat.Excel2007MacroEnabledTemplate:
                return ".xltm";
            case WorkbookFormat.Excel2007Template:
                return ".xltx";
            case WorkbookFormat.Excel97To2003:
                return ".xls";
            case WorkbookFormat.Excel97To2003Template:
                return ".xlt";
        }
    }

    public static load(file: File): Promise<Workbook> {
        return new Promise<Workbook>((resolve, reject) => {
            ExcelUtility.readFileAsUint8Array(file).then((a) => {
                Workbook.load(a, null, (w) => {
                    resolve(w);
                }, (e) => {
                    reject(e);
                });
            }, (e) => {
                reject(e);
            });
        });
    }

    public static loadFromUrl(url: string): Promise<Workbook> {
        return new Promise<Workbook>((resolve, reject) => {
            const req = new XMLHttpRequest();
            req.open("GET", url, true);
            req.responseType = "arraybuffer";
            req.onload = (d) => {
                const data = new Uint8Array(req.response);
                Workbook.load(data, null, (w) => {
                    resolve(w);
                }, (e) => {
                    reject(e);
                });
            };
            req.send();
        });
    }

    public static save(workbook: Workbook, fileNameWithoutExtension: string): Promise<string> {
        return new Promise<string>((resolve, reject) => {
            const opt = new WorkbookSaveOptions();
            opt.type = "blob";

            workbook.save(opt, (d) => {
                const fileExt = ExcelUtility.getExtension(workbook.currentFormat);
                const fileName = fileNameWithoutExtension + fileExt;
                saveAs(d as Blob, fileName);
                resolve(fileName);
            }, (e) => {
                reject(e);
            });
        });
    }

    private static readFileAsUint8Array(file: File): Promise<Uint8Array> {
        return new Promise<Uint8Array>((resolve, reject) => {
            const fr = new FileReader();
            fr.onerror = (e) => {
                reject(fr.error);
            };

            if (fr.readAsBinaryString) {
                fr.onload = (e) => {
                    const rs = (fr as any).resultString;
                    const str: string = rs != null ? rs : fr.result;
                    const result = new Uint8Array(str.length);
                    for (let i = 0; i < str.length; i++) {
                        result[i] = str.charCodeAt(i);
                    }
                    resolve(result);
                };
                fr.readAsBinaryString(file);
            } else {
                fr.onload = (e) => {
                    resolve(new Uint8Array(fr.result as ArrayBuffer));
                };
                fr.readAsArrayBuffer(file);
            }
        });
    }
}
tsコピー

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ExcelUtility } from "./ExcelUtility";
import { IgxExcelModule } from "igniteui-angular-excel";
import { IgxSpreadsheetModule } from "igniteui-angular-spreadsheet";

@NgModule({
  bootstrap: [AppComponent],
  declarations: [
    AppComponent,

],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    FormsModule,
    IgxExcelModule,
    IgxSpreadsheetModule
],
  providers: [ExcelUtility],
schemas: []
})
export class AppModule {}
tsコピー

import { Component, OnInit, ViewChild } from "@angular/core";
import { IgxSpreadsheetComponent } from "igniteui-angular-spreadsheet";
import { SpreadsheetCell } from "igniteui-angular-spreadsheet";
import { ExcelUtility } from "./ExcelUtility";

@Component({
  standalone: false,
  selector: "app-root",
  styleUrls: ["./app.component.scss"],
  templateUrl: "./app.component.html"
})
export class AppComponent implements OnInit {

  public activeCellText: string;

  @ViewChild("spreadsheet", { static: true })
  public spreadsheet: IgxSpreadsheetComponent;

  constructor() { }

  public ngOnInit() {
      const excelFile = "https://static.infragistics.com/xplatform/excel/SalesData.xlsx";

      ExcelUtility.loadFromUrl(excelFile).then((w) => {
          this.spreadsheet.workbook = w;
      });
  }

  public onClick() {
      this.spreadsheet.activeCell = new SpreadsheetCell(this.activeCellText);
  }

}
tsコピー

<div class="container vertical">
    <div class="options horizontal">
        <input type="text" [(ngModel)]="activeCellText">
        <button (click)="onClick()">Activate Cell</button>
        <label class="options-item">Current Active Cell: {{spreadsheet.activeCell}}</label>
    </div>

    <igx-spreadsheet #spreadsheet height="100%" width="100%"></igx-spreadsheet>
</div>
htmlコピー

/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scssコピー

Edit in: Codesandbox

Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.

60 以上のコンポーネント、柔軟な API、強力なテーマ設定およびブランディング機能、必要な速度と機能を備えた Angular アプリケーションを構築するための豊富な機能セット。

無料で試してみる

Activation Overview

Angular IgxSpreadsheetComponent 컨트롤의 활성화는 스프레드시트의 현재 workbook의 셀, 창 및 워크시트로 나뉩니다. 세 가지 "활성" 속성은 아래에 설명되어 있습니다.

• activeCell: 스프레드시트의 활성 셀을 반환하거나 설정합니다. 이를 설정하려면 SpreadsheetCell의 새 인스턴스를 생성하고 열과 행 또는 셀의 문자열 주소와 같은 해당 셀에 대한 정보를 전달해야 합니다.
• activePane: 스프레드시트 컨트롤의 현재 활성 워크시트에 있는 활성 창을 반환합니다.
• activeWorksheet: 스프레드시트 컨트롤의 통합 workbook에 있는 활성 워크시트를 반환하거나 설정합니다. 이는 스프레드시트에 첨부된 통합 workbook의 기존 워크시트로 설정하여 설정할 수 있습니다.

Code Snippet

다음 코드 조각은 IgxSpreadsheetComponent 컨트롤에서 셀 및 워크시트의 활성화 설정을 보여줍니다.

this.spreadsheet.activeWorksheet = this.spreadsheet.workbook.worksheets(1);

this.spreadsheet.activeCell = new SpreadsheetCell("C5");
ts

API References

• activeCell
• activePane
• activeWorksheet
• SpreadsheetCell
• IgxSpreadsheetComponent
• workbook