Como converter dados JSON em uma planilha Excel com Angular

Transforme seus dados com facilidade seguindo este guia curto e simples.

Como desenvolvedor, você está aberto a enfrentar novos desafios diariamente em diferentes projetos nos quais esteja trabalhando. Às vezes, os aplicativos da Web precisam executar algumas tarefas extras para atingir objetivos diferentes, dependendo dos requisitos técnicos ou de negócios.

Talvez seja necessário coletar dados de uma API e processá-los em um formato diferente, como PDF, XML, DOCX ou XLSX.

Neste guia, você aprenderá como transformar dados JSON recebidos de uma resposta de API em uma planilha Excel bem organizada em seu aplicativo Angular.

O que é a biblioteca XLSX?

A biblioteca Xlsx é um recurso eficaz para desenvolvedores Angular que desejam transformar dados JSON de uma resposta de API em uma planilha Excel elegante. Através do uso deste módulo, os desenvolvedores podem baixar e modificar rapidamente os dados JSON.

Você pode usar a biblioteca Xlsx para criar relatórios para sua equipe ou apresentar dados de novas maneiras. Se você deseja uma maneira rápida e fácil de gerenciar seus dados em aplicativos JavaScript, esta é uma boa opção.

Como configurar a biblioteca XLSX com um aplicativo Angular

Antes de começar a usar a biblioteca Xlsx em seu aplicativo Angular, é importante ter um ambiente de desenvolvimento Node.js e Angular configurado em sua máquina. Com o Node.js instalado, o Angular é fácil de configurar executando npm install -g @angular/cli em um terminal.

Crie um novo projeto Angular executando ng new [your-angular-app-name] no terminal. Em seguida, navegue até o diretório do projeto conforme mostrado abaixo:

Você também pode iniciar um servidor de desenvolvimento local executando ng serve --o, que permite visualizar seu aplicativo Angular e as alterações feitas nele ao vivo no navegador.

Depois de configurar um aplicativo Angular, instalar a biblioteca Xlsx é um processo simples que você pode concluir simplesmente executando npm install xlsx --save. Este comando instalará as dependências necessárias para usar a biblioteca Xlsx.

Como converter dados JSON para o formato XLSX em Angular

Com o Angular CLI, você pode gerar um novo serviço executando o comando ng generate service [nome do serviço] no terminal. Por exemplo, neste caso, você pode gerar o serviço Excel necessário usando ng generate service ExcelService.

Este comando generate criará o arquivo de serviço: ExcelService.service.ts, no diretório src/app do projeto. O arquivo fica assim por padrão:

import { Injectable } from '@angular/core'; 
@Injectable({ providedIn: 'root' }) 
export class ExcelServiceService {
  constructor() { } 
}

Este arquivo ExcelService cuidará da funcionalidade de exportação de dados para o formato Excel. Atualize o arquivo ExcelService.service.ts para ficar semelhante ao código abaixo:

import { Injectable } from '@angular/core'; 
import * as XLSX from 'xlsx'; 
const EXCEL_EXTENSION = '.xlsx'; // excel file extension
@Injectable({ providedIn: 'root' }) 
export class ExcelServiceService { 
  constructor () { }
  public exportToExcel (element: any, fileName: string): void {
    // generate workbook and add the worksheet
    const ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet(element);
    const workbook: XLSX.WorkBook = XLSX.utils.book_new(); 
    // save to file
    XLSX.utils.book_append_sheet(workbook, ws, 'Sheet1');
    XLSX.writeFile(workbook, ${fileName}${EXCEL_EXTENSION}); 
  }
}

No código acima, você importa a biblioteca Xlsx e cria uma variável constante, EXCEL_EXTENSION para armazenar a extensão do arquivo Excel.

O método exportToExcel aceita dois parâmetros: element e fileName. O parâmetro element representa os dados a serem exportados para o arquivo Excel, enquanto o parâmetro fileName é o nome do arquivo Excel.

Para exportar os dados para o arquivo Excel, crie uma planilha usando o método json_to_sheet da biblioteca Xlsx. Crie também uma pasta de trabalho usando o método book_new da biblioteca.

Em seguida, adicione a planilha à pasta de trabalho com o método book_append_sheet e salve-a em um arquivo usando writeFile.

Anteriormente, você criou um serviço Excel para facilitar o processo de download e conversão de dados JSON em uma planilha Excel. Para usar este serviço, você precisa criar o componente Angular relevante e importar o arquivo de serviço para ele.

import { ExcelService } from './excel.service';

Em seguida, você deve injetá-lo no construtor do componente assim:

constructor(private excelService: ExcelService) { 
  .... 
}

Em seguida, você pode implementar a função (exportExcel) onde usará o método exportToExcel para exportar JSON para Excel. O código abaixo demonstra como fazer isso.

exportExcel(): void { 
  const fileToExport = this.apiJsonResponseData.map((items:any) => { 
    return {
     "User Id": items?.userId,
     "Id": items?.id,
     "Title": items?.title,
     "Body": items?.body
   } 
  });
  this.excelService.exportToExcel(
   fileToExport,
   'yourExcelFile-' + new Date().getTime() + '.xlsx'
 );
}

No código acima, você definiu o método exportExcel para chamar o método exportToExcel do ExcelService. A nova variável, fileToExport, armazena os dados a serem exportados. A matriz apiJsonResponseData contém os dados JSON obtidos da resposta da API.

Posteriormente, o método exportToExcel do excelService pega o fileToExport e seu nome de arquivo preferido. Observe como você pode anexar o carimbo de data/hora atual ao nome do arquivo para garantir que ele seja exclusivo. Este método irá converter os dados JSON e exportá-los para um arquivo XLSX que você pode visualizar no Excel.

Esta função agora está disponível para uso em qualquer parte do seu aplicativo Angular, e você pode facilmente adicioná-la como um manipulador de eventos para um evento click ou usá-la de qualquer outra forma adequada com base em seus requisitos.

Você pode ver um exemplo de uso desta funcionalidade na imagem abaixo. Os dados JSON de uma API externa são renderizados na página, com um botão para Exportar dados para Excel:

Ao clicar no botãoExportar dados para Excel, seu navegador fará o download do arquivo Excel. Quando você abre o arquivo XLSX, o arquivo de planilha de saída fica assim:

Convertendo dados de JSON para planilhas do Excel em Angular

Você pode usar a biblioteca Xlsx para manipular facilmente planilhas do Excel em seu aplicativo web. As etapas realizadas aqui permitem transformar dados JSON de uma API em uma planilha Excel bem organizada. Você também pode converter dados do Excel de volta para JSON usando outras funções da biblioteca.

Uma boa maneira de praticar o uso desta biblioteca é construir um aplicativo que gere relatórios semanais ou mensais a partir de uma API e os organize como dados do Excel.