Web Components Uso de libros de trabajo

El motor de Excel Infragistics Web Components le permite guardar datos y cargarlos desde Microsoft® Excel®. Puede crear libros y hojas de cálculo, ingresar datos y exportar los datos a Excel utilizando las diversas clases de la biblioteca. El motor de Excel Infragistics Web Components facilita la exportación de los datos de su aplicación como una hoja de cálculo de Excel, así como la importación de datos de Excel a su aplicación.

Web Components Ejemplo de uso de libros de trabajo

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

¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

Cambiar fuente predeterminada

Primero cree una nueva instancia de IWorkbookFont. A continuación, agregue la nueva fuente a la colección styles del Workbook. Este estilo contiene las propiedades predeterminadas para todas las celdas del libro, a menos que se especifique lo contrario en una fila, columna o celda. Cambiar las propiedades del estilo cambiará las propiedades de formato de celda predeterminadas en el libro.

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

Configuración de propiedades del libro de trabajo

Las propiedades de los documentos de Microsoft Excel® proporcionan información para ayudar a organizar y realizar un seguimiento de los documentos. Puede usar la biblioteca de Excel Infragistics Web Components para establecer estas propiedades mediante la propiedad del Workbook​ ​documentProperties objeto. Las propiedades disponibles son:

• Author

• Title

• Subject

• Keywords

• Category

• Status

• Comments

• Company

• Manager

El siguiente código demuestra cómo crear un libro y establecer sus propiedades title y documento status.

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

Protección del libro de trabajo

La función de protección del libro le permite proteger la estructura del libro. Es decir, la capacidad de un usuario de agregar, cambiar el nombre, eliminar, ocultar y reordenar las hojas de trabajo de ese libro.

La protección no se aplica a través del modelo de objetos de Infragistics Excel Engine. Es responsabilidad de la interfaz de usuario que visualiza este modelo de objetos respetar estas configuraciones de protección y permitir o restringir que el usuario realice las operaciones correspondientes.

La protección se aplica a un libro invocando su método protect.

Cuando un Workbook está protegido sin contraseña, el usuario final puede desproteger el Workbook en Excel sin tener que proporcionar una contraseña. Para desproteger un Workbook mediante programación, se puede utilizar el método unprotect.

Cuando un Workbook está protegido, los valores de las propiedades del WorkbookProtection instancia de este Workbook 's protection La propiedad indica las operaciones deshabilitadas.

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

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

Compruebe si un libro tiene protección. Esta propiedad de solo lectura devuelve verdadero si el libro tiene alguna protección establecida mediante las sobrecargas del método Protect.

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

Esta propiedad de solo lectura devuelve un objeto de tipo WorkbookProtection que contiene propiedades para obtener cada configuración de protección individualmente.

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

Referencias de API

• documentProperties
• WorkbookProtection
• Workbook
• Workbook