Web Components Configuración de la hoja de cálculo

El componente Web Components hoja de cálculo permite al usuario configurar muchos aspectos diferentes del control. Esto incluye, entre otros, la edición de las celdas, la visibilidad de las líneas de cuadrícula y los encabezados, la protección, el nivel de zoom y varias otras propiedades relacionadas con la hoja de cálculo de Excel.

Web Components Ejemplo de configuración de una hoja de cálculo

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 { IgcSpreadsheetModule } from 'igniteui-webcomponents-spreadsheet';
import { IgcSpreadsheetComponent } from 'igniteui-webcomponents-spreadsheet';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { SpreadsheetEnterKeyNavigationDirection } from 'igniteui-webcomponents-spreadsheet';
import { SpreadsheetCellSelectionMode } from 'igniteui-webcomponents-spreadsheet';
import { ExcelUtility } from './ExcelUtility';

ModuleManager.register(IgcSpreadsheetModule);

export class SpreadsheetConfiguring {

    private spreadsheet: IgcSpreadsheetComponent;

    constructor() {

        this.onGridlinesVisibleChanged = this.onGridlinesVisibleChanged.bind(this);
        this.onTabBarAreaVisibleChanged = this.onTabBarAreaVisibleChanged.bind(this);
        this.onIsProtectedChanged = this.onIsProtectedChanged.bind(this);
        this.onSpreadsheetZoomLevelChange = this.onSpreadsheetZoomLevelChange.bind(this);

        this.onHeadersVisibleChanged = this.onHeadersVisibleChanged.bind(this);
        this.onFormulaBarVisibleChanged = this.onFormulaBarVisibleChanged.bind(this);
        this.onEnterKeyNavEnabledChanged = this.onEnterKeyNavEnabledChanged.bind(this);

        this.onEnterKeyNavDirectionChanged = this.onEnterKeyNavDirectionChanged.bind(this);
        this.onSelectionModeChanged = this.onSelectionModeChanged.bind(this);

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

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

        (document.getElementById('selectionModeDropDown') as any).value = 'Normal';

        document.getElementById('areGridlinesVisibleCheckbox')!.addEventListener('change', this.onGridlinesVisibleChanged);
        document.getElementById('isTabBarAreaVisibleCheckbox')!.addEventListener('change', this.onTabBarAreaVisibleChanged);
        document.getElementById('isProtectedCheckbox')!.addEventListener('change', this.onIsProtectedChanged);
        document.getElementById('spreadsheetZoomLevelRange')!.addEventListener('input', this.onSpreadsheetZoomLevelChange);

        document.getElementById('areHeadersVisibleCheckbox')!.addEventListener('change', this.onHeadersVisibleChanged);
        document.getElementById('isFormulaBarVisibleCheckbox')!.addEventListener('change', this.onFormulaBarVisibleChanged);
        document.getElementById('isEnterKeyNavEnabledCheckbox')!.addEventListener('change', this.onEnterKeyNavEnabledChanged);

        document.getElementById('enterKeyNavDirectionDropDown')!.addEventListener('change', this.onEnterKeyNavDirectionChanged);
        document.getElementById('selectionModeDropDown')!.addEventListener('change', this.onSelectionModeChanged);
    }

    onGridlinesVisibleChanged(e: any) {
        this.spreadsheet.areGridlinesVisible = e.target.checked;
    }

    onTabBarAreaVisibleChanged(e: any) {
        const checked: boolean = e.target.checked;
        if (checked) {
            this.spreadsheet.workbook.windowOptions.tabBarVisible = true;
        }
        else {
            this.spreadsheet.workbook.windowOptions.tabBarVisible = false;
        }
    }

    onIsProtectedChanged(e: any) {
        const checked: boolean = e.target.checked;
        if (checked) {
            this.spreadsheet.activeWorksheet.protect();
        }
        else {
            this.spreadsheet.activeWorksheet.unprotect();
        }
    }

    onSpreadsheetZoomLevelChange(e: any) {
        this.spreadsheet.zoomLevel = e.target.value;
        document.getElementById('zoomLevelLabel')!.textContent = 'Zoom Level: ' + e.target.value.toString() + '%';
    }

    onHeadersVisibleChanged(e: any) {
        this.spreadsheet.areHeadersVisible = e.target.checked;
    }

    onFormulaBarVisibleChanged(e: any) {
        this.spreadsheet.isFormulaBarVisible = e.target.checked;
    }

    onEnterKeyNavEnabledChanged(e: any) {
        this.spreadsheet.isEnterKeyNavigationEnabled = e.target.checked;
    }

    onEnterKeyNavDirectionChanged(e: any) {
        const selection: string = e.target.value;

        switch (selection) {
            case 'Down': {
                this.spreadsheet.enterKeyNavigationDirection = SpreadsheetEnterKeyNavigationDirection.Down;
                break;
            }
            case 'Up': {
                this.spreadsheet.enterKeyNavigationDirection = SpreadsheetEnterKeyNavigationDirection.Up;
                break;
            }
            case 'Left': {
                this.spreadsheet.enterKeyNavigationDirection = SpreadsheetEnterKeyNavigationDirection.Left;
                break;
            }
            case 'Right': {
                this.spreadsheet.enterKeyNavigationDirection = SpreadsheetEnterKeyNavigationDirection.Right;
                break;
            }
        }
    }

    onSelectionModeChanged(e: any) {
        const selection: string = e.target.value;

        switch (selection) {
            case 'AddToSelection': {
                this.spreadsheet.selectionMode = SpreadsheetCellSelectionMode.AddToSelection;
                break;
            }
            case 'ExtendSelection': {
                this.spreadsheet.selectionMode = SpreadsheetCellSelectionMode.ExtendSelection;
                break;
            }
            case 'Normal': {
                this.spreadsheet.selectionMode = SpreadsheetCellSelectionMode.Normal;
                break;
            }
        }
    }
}

new SpreadsheetConfiguring();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>SpreadsheetConfiguring</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">
        <span class="options-label">Selection Mode: </span>
        <select id="selectionModeDropDown">
            <option>AddToSelection</option>
            <option>ExtendSelection</option>
            <option>Normal</option>
        </select>

        <span class="options-label">Enter Key Navigation Direction: </span>
        <select id="enterKeyNavDirectionDropDown">
            <option>Down</option>
            <option>Left</option>
            <option>Right</option>
            <option>Up</option>
        </select>
    </div>
    <div class="options horizontal">
        <label class="options-label" style="width: 145px"><input id="areHeadersVisibleCheckbox" type="checkbox" checked="true" /> Enable Headers</label>
        <label class="options-label" style="width: 175px"><input id="isFormulaBarVisibleCheckbox" type="checkbox" checked="true"  /> Enable Formula Bar</label>
        <label class="options-label" style="width: 225px"><input id="isEnterKeyNavEnabledCheckbox" type="checkbox" checked="true"  />Enable Enter Key Navigation</label>
        <label id="zoomLevelLabel" class="options-label">Zoom Level: 100% </label>
    </div>
    <div class="options horizontal">
        <label class="options-label" style="width: 145px"><input type="checkbox" id="areGridlinesVisibleCheckbox" checked="true" /> Enable Gridlines</label>
        <label class="options-label" style="width: 175px"><input type="checkbox" id="isTabBarAreaVisibleCheckbox" checked="true" /> Enable Tab Bar Area</label>
        <label class="options-label" style="width: 225px"><input type="checkbox" id="isProtectedCheckbox" /> Enable Protected Mode</label>
        <input id="spreadsheetZoomLevelRange" type="range" min="50" max="150" step="5" />
    </div>
    <igc-spreadsheet id="spreadsheet" width="100%" height="calc(100% - 7.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

¿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.

Configurar la edición de celdas

Cuando un usuario edita un valor de celda y confirma la nueva entrada, el control IgcSpreadsheetComponent tiene la capacidad de navegar a celdas adyacentes a la celda actualmente activa al presionar la tecla Intro, dependiendo de la configuración de la hoja de cálculo.

Para habilitar esta navegación con la tecla Enter, puede establecer la propiedad isEnterKeyNavigationEnabled en true. Si se establece en falso, la celda activa permanecerá igual al presionar la tecla Intro.

También puede configurar la dirección de la celda adyacente a la que se navega al presionar la tecla Intro estableciendo la propiedad enterKeyNavigationDirection en Down, Up, Left o Right.

Los siguientes fragmentos de código demuestran lo anterior:

<igc-spreadsheet is-enter-key-navigation-enabled="true"
    enter-key-navigation-direction="Left">
</igc-spreadsheet>
html

import { SpreadsheetEnterKeyNavigationDirection } from 'igniteui-webcomponents-spreadsheet';
ts

this.spreadsheet.isEnterKeyNavigationEnabled = true;
this.spreadsheet.enterKeyNavigationDirection = SpreadsheetEnterKeyNavigationDirection.Left;
ts

Configurar la barra de fórmulas

El Web Components IgcSpreadsheetComponent permite configurar la visibilidad de la barra de fórmulas estableciendo la isFormulaBarVisible propiedad del control.

Los siguientes fragmentos de código demuestran lo anterior:

<igc-spreadsheet is-formula-bar-visible="true"></igc-spreadsheet>
html

this.spreadsheet.isFormulaBarVisible = true;
ts

Configurar líneas de cuadrícula

​IgcSpreadsheetComponent le permite configurar la visibilidad de sus líneas de cuadrícula configurando la propiedad areGridlinesVisible del control.

Los siguientes fragmentos de código demuestran lo anterior:

<igc-spreadsheet are-gridlines-visible="true"></igc-spreadsheet>
html

this.spreadsheet.areGridlinesVisible = true;
ts

Configurar encabezados

​IgcSpreadsheetComponent le permite configurar la visibilidad de sus encabezados estableciendo la propiedad areHeadersVisible del control.

Los siguientes fragmentos de código demuestran lo anterior:

<igc-spreadsheet are-headers-visible="false"></igc-spreadsheet>
html

this.spreadsheet.areHeadersVisible = false;
ts

Configurar la navegación

El control IgcSpreadsheetComponent le permite configurar la navegación entre las celdas de una hoja de trabajo configurando si el control está o no en "modo final". El modo de finalización es la funcionalidad en la que, al presionar una tecla de flecha, la celda activa se moverá desde la celda actual hasta el final de la fila o columna donde existen datos en las celdas adyacentes, dependiendo de la dirección de la tecla de flecha presionada. Esta funcionalidad es buena para navegar muy rápidamente hasta el final de grandes bloques de datos.

Por ejemplo, si está en modo final, hace clic en un bloque grande de datos de 100x100 y presiona la tecla de flecha Right, esto navegará hasta el extremo derecho de la fila en la que se encuentra, hasta la columna de datos más a la derecha. Después de esta operación, IgcSpreadsheetComponent saldrá del modo final.

El modo de finalización entra en vigor en tiempo de ejecución cuando el usuario presiona la tecla Finalizar, pero se puede configurar mediante programación estableciendo la propiedad isInEndMode del control de hoja de cálculo.

Los siguientes fragmentos de código demuestran lo anterior, ya que IgcSpreadsheetComponent comenzará en modo final:

<igc-spreadsheet is-in-end-mode="true"></igc-spreadsheet>
html

this.spreadsheet.isInEndMode = true;
ts

Configurar la protección

El IgcSpreadsheetComponent respetará la protección de un libro de trabajo hoja por hoja de trabajo. La configuración para la protección de una hoja de trabajo se puede configurar llamando al método Protect() en la hoja de trabajo para protegerla y al método Unprotect() para desprotegerla.

Puede activar o desactivar la protección en la hoja de trabajo actualmente activa del control IgcSpreadsheetComponent usando el siguiente código:

this.spreadsheet.activeWorksheet.protect();
this.spreadsheet.activeWorksheet.unprotect();
ts

Configurar la selección

El control IgcSpreadsheetComponent le permite configurar el tipo de selección permitida en el control y luego el usuario presiona las teclas modificadoras (Shift o Ctrl). Esto se hace estableciendo la propiedad selectionMode de la hoja de cálculo en uno de los siguientes valores:

• AddToSelection: se agregan nuevos rangos de celdas a la colección cellRanges del objeto SpreadsheetSelection sin necesidad de mantener presionada la tecla Ctrl al arrastrar con el mouse y se agrega un rango con la primera tecla de flecha de navegación después de ingresar al modo. Se puede ingresar al modo presionando Shift+F8.
• ExtendSelection: el rango de selección en la colección cellRanges del objeto SpreadsheetSelection que representa la celda activa se actualiza cuando uno usa el mouse para seleccionar una celda o navega a través del teclado.
• Normal: La selección se reemplaza al arrastrar el mouse para seleccionar una celda o rango de celdas. De manera similar, al navegar mediante el teclado se crea una nueva selección. Se puede agregar un nuevo rango manteniendo presionada la tecla Ctrl y usando el mouse y se puede alterar el rango de selección que contiene la celda activa manteniendo presionada la tecla Shift mientras se hace clic con el mouse o se navega con el teclado, como por ejemplo con las teclas de flecha.

El objeto SpreadsheetSelection mencionado en las descripciones anteriores se puede obtener utilizando la propiedad activeSelection del control IgcSpreadsheetComponent.

Los siguientes fragmentos de código demuestran la configuración del modo de selección:

<igc-spreadsheet selection-mode="ExtendSelection"></igc-spreadsheet>
html

import { SpreadsheetCellSelectionMode } from 'igniteui-webcomponents-spreadsheet';
ts

this.spreadsheet.selectionMode = SpreadsheetCellSelectionMode.ExtendSelection;
ts

La selección del control IgcSpreadsheetComponent también se puede configurar u obtener mediante programación. Para la selección única, puede establecer la propiedad activeCell La selección múltiple se realiza a través del objeto SpreadsheetSelection que devuelve la propiedad activeSelection del control IgcSpreadsheetComponent.

El objeto SpreadsheetSelection tiene un método AddCellRange() que le permite agregar mediante programación un rango de celdas a la selección de la hoja de cálculo en forma de un nuevo objeto SpreadsheetCellRange.

El siguiente fragmento de código demuestra cómo agregar un rango de celdas a la selección de la hoja de cálculo:

this.spreadsheet.activeSelection.addCellRange(new SpreadsheetCellRange(2, 2, 5, 5));
ts

Configurar el área de la barra de pestañas

El control IgcSpreadsheetComponent respeta la configuración de la visibilidad y el ancho del área de la barra de pestañas de WindowOptions del workbook actualmente activo a través de las propiedades tabBarWidth y TabBarVisibility, respectivamente.

El área de la barra de pestañas es el área que visualiza los nombres de las hojas de trabajo como pestañas en el control.

Puede configurar la visibilidad y el ancho de la barra de pestañas utilizando el siguiente fragmento de código:

this.spreadsheet.workbook.windowOptions.tabBarVisible = false;

this.spreadsheet.workbook.windowOptions.tabBarWidth = 200;
ts

Configurar el nivel de zoom

El componente Hoja de cálculo Web Components admite la posibilidad de acercar y alejar mediante la configuración de su zoomLevel propiedad. El nivel de zoom puede ser de un máximo del 400% y un mínimo del 10%.

Establecer esta propiedad en un número representa el porcentaje como un número entero, por lo que establecer zoomLevel en 100 equivale a establecerlo en 100%.

Los siguientes fragmentos de código muestran cómo configurar el nivel de zoom de la hoja de cálculo:

<igc-spreadsheet zoom-level="200"></igc-spreadsheet>
html

this.spreadsheet.zoomLevel = 200;
ts

Referencias de API

• activeCell
• activeSelection
• CellRanges
• ExtendSelection:
• selectionMode
• SpreadsheetCellRange
• SpreadsheetSelection
• IgcSpreadsheetComponent
• WindowOptions
• workbook
• zoomLevel