워크북을 사용한 Web Components

Infragistics Web Components Excel Engine을 사용하면 Microsoft® Excel®에 데이터를 저장하고 로드할 수 있습니다. 라이브러리의 다양한 클래스를 사용하여 통합 문서와 워크시트를 만들고, 데이터를 입력하고, Excel로 데이터를 내보낼 수 있습니다. Infragistics Web Components Excel Engine을 사용하면 애플리케이션의 데이터를 Excel 스프레드시트로 쉽게 내보내고 Excel에서 애플리케이션으로 데이터를 가져올 수 있습니다.

워크북을 사용한 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 { IgcExcelXlsxModule } from 'igniteui-webcomponents-excel';
// import { IgcExcelCoreModule } from 'igniteui-webcomponents-excel';
import { IgcExcelModule } from 'igniteui-webcomponents-excel';
import { IgcDataGridModule } from 'igniteui-webcomponents-grids';
import { IgcDataGridComponent } from 'igniteui-webcomponents-grids';
import { Workbook } from 'igniteui-webcomponents-excel';
import { WorkbookFormat } from 'igniteui-webcomponents-excel';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(
    // IgcExcelXlsxModule,
    // IgcExcelCoreModule,
    IgcExcelModule,
    IgcDataGridModule,
);

export class ExcelLibraryWorkbooks {

    public grid: IgcDataGridComponent;

    public employeeData: any[] = [];
    public expenseData: any[] = [];
    public incomeData: any[] = [];

    public companies: string[];
    public firstNames: string[];
    public lastNames: string[];
    public countries: string[];
    public titles: string[];
    public employeeColumns: string[];
    public selected: string;

    constructor() {

        this.companies = ['Amazon', 'Ford', 'Jaguar', 'Tesla', 'IBM', 'Microsoft'];
        this.firstNames = ['Andrew', 'Mike', 'Martin', 'Ann', 'Victoria', 'John', 'Brian', 'Jason', 'David'];
        this.lastNames = ['Smith', 'Jordan', 'Johnson', 'Anderson', 'Louis', 'Phillips', 'Williams'];
        this.countries = ['UK', 'France', 'USA', 'Germany', 'Poland', 'Brazil'];
        this.titles = ['Sales Rep.', 'Engineer', 'Administrator', 'Manager'];
        this.employeeColumns = ['Name', 'Company', 'Title', 'Age', 'Country', 'Salary'];

        this.initData();

        this.grid = document.getElementById('grid') as IgcDataGridComponent;
        this.grid.dataSource = this.employeeData;

        const createBtn = document.getElementById('createBtn') as HTMLButtonElement;
        createBtn!.addEventListener('click', this.createWorkbook);

        const saveBtn = document.getElementById('saveBtn') as HTMLButtonElement;
        saveBtn!.addEventListener('click', this.saveWorkbook);

        const tableSelect = document.getElementById('tableSelect') as HTMLSelectElement;
        this.selected = 'Employees - Table1';
        tableSelect.value = this.selected;
        tableSelect!.addEventListener('change', this.onTableChange);
    }

    public initData() {
        this.expenseData = [];
        this.employeeData = [];
        this.incomeData = [];

        const startYear = 2011;

        for (let i = 1; i < 20; i++) {

            const year = startYear + i;

            // Employee Data
            const name: string = this.getItem(this.firstNames) + ' ' + this.getItem(this.lastNames);
            const company: string = this.getItem(this.companies);
            const title: string = this.getItem(this.titles);
            const age: number = this.getRandom(25, 60);
            const country: string = this.getItem(this.countries);
            const salary: string = this.getAmount(60000, 80000);

            // Expense Data
            const computerExpense: string = this.getAmount(50000, 60000);
            const researchExpense: string = this.getAmount(120000, 160000);
            const travelExpense: string = this.getAmount(15000, 25000);
            const salaryExpense: string = this.getAmount(1000000, 2000000);
            const softwareExpense: string = this.getAmount(100000, 150000);

            // Income Data
            const phoneIncome: string = this.getAmount(3500000, 6000000);
            const computerIncome: string = this.getAmount(200000, 300000);
            const softwareIncome: string = this.getAmount(700000, 800000);
            const serviceIncome: string = this.getAmount(650000, 750000);
            const royaltyIncome: string = this.getAmount(400000, 450000);

            this.employeeData.push({
                'Name': name,
                'Company': company,
                'Title': title,
                'Age': age,
                'Country': country,
                'Salary': salary
            });

            this.expenseData.push({
                'Year': year,
                'Computers': computerExpense,
                'Research': researchExpense,
                'Travel': travelExpense,
                'Salary': salaryExpense,
                'Software': softwareExpense
            });

            this.incomeData.push({
                'Year': year,
                'Phones': phoneIncome,
                'Computers': computerIncome,
                'Software': softwareIncome,
                'Services': serviceIncome,
                'Royalties': royaltyIncome
            });
        }
    }

    public getItem(array: string[]): string {
        const i = this.getRandom(0, array.length - 1);
        return array[i];
    }

    public getRandom(min: number, max: number): number {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }

    public getAmount(min: number, max: number) {
        const n = this.getRandom(min, max);
        const s = n.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
        return '$' + s.replace('.00', '');
    }

    public onTableChange = (e: any) => {
        const newVal: string = e.target.value.toString();
        this.selected = newVal;
        this.switchDataSource(newVal);
    }

    public createWorkbook = (e: any) => {
        this.initData();
        this.switchDataSource(this.selected);
    }

    public saveWorkbook = (e: any) => {
        const headers = Object.keys(this.grid.dataSource[0]);
        headers.pop();

        const wb = new Workbook(WorkbookFormat.Excel2007);
        const ws = wb.worksheets().add('Sheet1');

        for (let i = 0; i < headers.length; i++) {
            ws.rows(0).cells(i).value = headers[i];
        }

        for (let i = 0; i < this.grid.dataSource.length; i++) {
            const dataRow = this.grid.dataSource[i];
            const xlRow = ws.rows(i + 1);
            for (let j = 0; j < headers.length; j++) {
                xlRow.setCellValue(j, dataRow[headers[j]]);
            }
        }

        ExcelUtility.save(wb, 'WorkbookSample');
    }

    public switchDataSource(value: string) {
        if (value.includes('Employee')) {
            // this.setState({data: this.employeeData} as any);
            this.grid.dataSource = this.employeeData;
        }
        else if (value.includes('Expense')) {
            // this.setState({data: this.expenseData} as any);
            this.grid.dataSource = this.expenseData;
        }
        else {
            // this.setState({data: this.incomeData} as any);
            this.grid.dataSource = this.incomeData;
        }
    }
}

new ExcelLibraryWorkbooks();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>ExcelLibraryWorkbooks</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">
        <button class="options-label" id="createBtn">Create Workbook</button>
        <button class="options-label" id="saveBtn">Save Workbook</button>
        <span class="options-label">Select Table to Export: </span>
        <select id="tableSelect">
            <option>Employees - Table1</option>
            <option>Expenses - Table2</option>
            <option>Income - Table3</option>
        </select>
    </div>
    <div class="container">
        <igc-data-grid id="grid"
            height="300px"
            width="100%">
        </igc-data-grid>
    </div>
</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 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

기본 글꼴 변경

먼저 IWorkbookFont의 새 인스턴스를 만듭니다. 다음으로 Workbook의 styles 컬렉션에 새 글꼴을 추가합니다. 이 스타일에는 행, 열 또는 셀에 별도로 지정되지 않는 한 통합 문서의 모든 셀에 대한 기본 속성이 포함됩니다. 스타일 속성을 변경하면 통합 문서의 기본 셀 형식 속성이 변경됩니다.

var workbook = new Workbook();
var font: IWorkbookFont;
font = workbook.styles().normalStyle.styleFormat.font;
font.name = "Times New Roman";
font.height = 16 * 20;
ts

통합 문서 속성 설정

Microsoft Excel® 문서 속성은 문서를 구성하고 추적하는 데 도움이 되는 정보를 제공합니다. Infragistics Web Components Excel Library를 사용하여 Workbook 개체의 documentProperties 속성을 사용하여 이러한 속성을 설정할 수 있습니다. 사용 가능한 속성은 다음과 같습니다.

• Author

• Title

• Subject

• Keywords

• Category

• Status

• Comments

• Company

• Manager

다음 코드는 통합 문서를 만들고 title 및 status 문서 속성을 설정하는 방법을 보여줍니다.

var workbook = new Workbook();
workbook.documentProperties.title = "Expense Report";
workbook.documentProperties.status = "Complete";
ts

통합 문서 보호

통합 문서 보호 기능을 사용하면 통합 문서의 구조를 보호할 수 있습니다. 즉, 사용자가 해당 통합 문서의 워크시트를 추가하고, 이름을 바꾸고, 삭제하고, 숨기고, 순서를 바꾸는 기능입니다.

보호는 Infragistics Excel Engine의 개체 모델을 통해 적용되지 않습니다. 이러한 보호 설정을 존중하고 사용자가 해당 작업을 수행하는 것을 허용하거나 제한하는 것은 이 개체 모델을 시각화하는 UI의 책임입니다.

​protect 메서드를 호출하여 통합 문서에 보호가 적용됩니다.

​Workbook 암호 없이 보호되면 최종 사용자는 암호를 제공하지 않고도 Excel에서 Workbook 보호를 해제할 수 있습니다. Workbook 프로그래밍 방식으로 보호 해제하려면 unprotect 메서드를 사용할 수 있습니다.

언제 Workbook 보호되어 있으면 해당 속성의 값은 WorkbookProtection 이것의 예 Workbook '에스 protection 속성은 비활성화된 작업을 나타냅니다.

If isProtected is already true, the protect method will be ignored.

var workbook = new Workbook();
workbook.protect(false, false);
ts

통합 문서에 보호 기능이 있는지 확인하세요. 이 읽기 전용 속성은 통합 문서에 Protect 메서드의 오버로드를 사용하여 설정된 보호가 있는 경우 true를 반환합니다.

var workbook = new Workbook();
var protect = workbook.isProtected;
ts

이 읽기 전용 속성은 각 보호 설정을 개별적으로 가져오기 위한 속성이 포함된 WorkbookProtection 유형의 개체를 반환합니다.

var workbook = new Workbook();
var protection = workbook.protection;
ts

API 참조

• documentProperties
• WorkbookProtection
• Workbook
• Workbook