Web Components 스프레드시트 활성화

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

Web Components 스프레드시트 활성화 예제

EXAMPLE

DATA

TS

HTML

CSS

import { saveAs } from "file-saver";
import { Workbook } from 'igniteui-webcomponents-excel';
import { WorkbookFormat } from 'igniteui-webcomponents-excel';
import { WorkbookSaveOptions } from 'igniteui-webcomponents-excel';
import { WorkbookLoadOptions } from 'igniteui-webcomponents-excel';
import { IgcExcelXlsxModule } from 'igniteui-webcomponents-excel';
import { IgcExcelCoreModule } from 'igniteui-webcomponents-excel';
import { IgcExcelModule } from 'igniteui-webcomponents-excel';

IgcExcelCoreModule.register();
IgcExcelModule.register();
IgcExcelXlsxModule.register();

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, new WorkbookLoadOptions(), (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, new WorkbookLoadOptions(), (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 { ExcelUtility } from './ExcelUtility';
import { IgcSpreadsheetModule } from 'igniteui-webcomponents-spreadsheet';
import { IgcSpreadsheetComponent } from 'igniteui-webcomponents-spreadsheet';
import { IgcSpreadsheetActiveCellChangedEventArgs } from 'igniteui-webcomponents-spreadsheet';
import { SpreadsheetCell } from 'igniteui-webcomponents-spreadsheet';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(IgcSpreadsheetModule);

export class SpreadsheetActivation {

    private spreadsheet: IgcSpreadsheetComponent;
    private activateText: string = "";

    constructor() {

        this.onSpreadsheetActiveCellChanged = this.onSpreadsheetActiveCellChanged.bind(this);
        this.onActiveCellAddressTextBoxChanged = this.onActiveCellAddressTextBoxChanged.bind(this);
        this.onActivateCellBtnClick = this.onActivateCellBtnClick.bind(this);

        this.spreadsheet = document.getElementById('spreadsheet') as IgcSpreadsheetComponent;
        this.spreadsheet.activeCellChanged = this.onSpreadsheetActiveCellChanged;

        let path = 'https://static.infragistics.com/xplatform/excel/SalesData.xlsx';
        ExcelUtility.loadFromUrl(path).then((w) => {
            this.spreadsheet.workbook = w;
        });

        document.getElementById('activateCellBtn')!.addEventListener('click', this.onActivateCellBtnClick);
        document.getElementById('activateCellTextBox')!.addEventListener('change', this.onActiveCellAddressTextBoxChanged);
    }

    onSpreadsheetActiveCellChanged(s: IgcSpreadsheetComponent, e: IgcSpreadsheetActiveCellChangedEventArgs) {
        document.getElementById('activeCellLabel')!.textContent = 'Current Active Cell: ' + e.newValue.toString();
    }

    onActivateCellBtnClick() {
        this.spreadsheet.activeCell = new SpreadsheetCell(this.activateText);
    }

    onActiveCellAddressTextBoxChanged(e: any) {
        this.activateText = e.target.value;
    }
}

new SpreadsheetActivation();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>SpreadsheetActivation</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample">
    <div class="options horizontal">
        <input id="activateCellTextBox" class="options-text" type="text" />

        <button id="activateCellBtn" class="options-button">Activate Cell</button>
        <label id="activeCellLabel" class="options-label"> Current Active Cell: </label>
    </div>
    <igc-spreadsheet id="spreadsheet" width="100%" height="calc(100% - 2.5rem)">
    </igc-spreadsheet>

</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

활성화 개요

Web Components IgcSpreadsheetComponent 컨트롤의 활성화는 스프레드시트의 현재 workbook 셀, 창 및 워크시트로 분할됩니다. 세 가지 "활성" 속성은 다음과 같습니다.

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

코드 조각

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

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

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

API 참조

• activeCell
• activePane
• activeWorksheet
• SpreadsheetCell
• IgcSpreadsheetComponent
• workbook