Visão geral da planilha Angular

O componente Angular Spreadsheet (visualizador do Excel) é leve, rico em recursos e fornecido com todas as opções necessárias para operar, visualizar e editar todos os tipos de dados de planilhas – científicos, comerciais, financeiros e muito mais. Todas as informações podem ser apresentadas em um formato tabular que parece intuitivo e fácil de navegar em células, painéis e planilhas. O IgxSpreadsheetComponent é complementado por uma interface flexível semelhante ao Excel, gráficos detalhados e recursos como ativação, edição de células, formatação condicional, estilo, seleção, área de transferência.

Angular Spreadsheet Example

Functionality

• Características

Assim como em uma planilha do Excel, você pode aplicar funcionalidades de filtragem, classificação, mover células, personalização em termos de cor das células, atalhos de teclado e até mesmo adicionar a capacidade de calcular fórmulas.

Spreadsheet Usage

• Desempenho

A planilha é compatível com todos os navegadores modernos e otimizada para modelos de planilhas complexos e volumosos, garantindo funcionalidade e simplicidade impecáveis.

• Layout flexível e fácil personalização

Você pode facilmente selecionar, adicionar, remover, alternar os recursos que deseja ligar/desligar e configurar as folhas React em um instante para que tudo atenda às necessidades dos usuários finais. Há também bibliotecas configuráveis, alternativas de estilo e formatação, opções de visibilidade, muitos temas para escolher.

• Interface conveniente semelhante ao Excel

Assim como dados operacionais no Excel, nosso componente de planilha fornece todas as operações conhecidas da área de transferência do Excel – copiar, colar, recortar. Você não precisará de treinamento extra ou novas habilidades para começar a usá-lo imediatamente. Ele também vem com opções para classificação, navegação completa pelo teclado, valores e fórmulas, arrastar células, edição de colunas e linhas, filtragem, formatação de números, redimensionamento. O mecanismo de cálculo inteligente e rápido potencializa até mesmo as estimativas mais complexas. Sem dependências do Excel.

• Operações de dados

Colete e gerencie dados científicos, comerciais, de engenharia, financeiros e educacionais. Prepare e crie análises, grades avançadas, relatórios, formulários de entrada de dados, orçamentos, cenários de previsão, planilhas personalizadas. Tudo isso graças à API abrangente.

• Processamento de dados rápido e seguro

Com nossa planilha, o processamento de dados é 100% seguro e protegido…

• Importação e exportação de Excel e CSV

Com a funcionalidade de importação/exportação integrada do Excel, você pode carregar e abrir documentos do Excel instantaneamente e visualizá-los sob demanda, adicionar alterações e salvá-los. Além disso, exporte sem esforço suas planilhas Excel .xlsx concluídas.

Dependencies

Ao instalar o componente de planilha Angular, o pacote principal e o Excel também devem ser instalados.

npm install --save igniteui-angular-core
npm install --save igniteui-angular-excel
npm install --save igniteui-angular-spreadsheet

Component Modules

O IgxSpreadsheetComponent requer os seguintes módulos:

import { IgxExcelModule } from 'igniteui-angular-excel';
import { IgxSpreadsheetModule } from 'igniteui-angular-spreadsheet';

@NgModule({
    imports: [
        // ...
        IgxExcelModule,
        IgxSpreadsheetModule,
        // ...
    ]
})
export class AppModule {}

Usage

Agora que o módulo de planilha Angular foi importado, a próxima etapa é a configuração básica da planilha.

<igx-spreadsheet #spreadsheet height="500px" width="100%">
</igx-spreadsheet>

[!Note]

In the following code snippet, an external ExcelUtility class is used to save and load a workbook.

A seguir demonstramos como carregar uma pasta de trabalho na planilha Angular

import { IgxSpreadsheetComponent } from 'igniteui-angular-spreadsheet';
import { ExcelUtility } from 'ExcelUtility';

// ...

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

ngOnInit() {
    const excelFile = '../../assets/Sample1.xlsx';
    ExcelUtility.loadFromUrl(excelFile).then((w) => {
      this.spreadsheet.workbook = w;
    });
}

API References

• IgxSpreadsheetComponent
• workbook