Como converter dados JSON em uma planilha do Excel com Angular

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

Pode ser 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 simples. Através do uso deste módulo, os desenvolvedores podem baixar e modificar dados JSON rapidamente.

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 [nome-do-aplicativo-angular] 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 ng gerar serviço [nome do serviço] comando no terminal. Por exemplo, neste caso, você pode gerar o serviço Excel que precisa usando ng gerar serviço ExcelService.

Esse gerar O comando criará o arquivo de serviço: ExcelService.service.ts, no origem/aplicativo diretório do projeto. O arquivo se parece com isso por padrão:

importar { Injetável } de'@angular/núcleo'; 
@Injetável({ Fornecido em: 'raiz' }) 
exportaraulaExcelServiçoServiço{
construtor() { } 
}

Esse ExcelServiço arquivo irá lidar com a funcionalidade de exportar dados para o formato Excel. Atualize o ExcelService.service.ts arquivo para se parecer com o código abaixo:

importar { Injetável } de'@angular/núcleo'; 
importar * como XLSX de'xlsx'; 
const EXCEL_EXTENSION = '.xlsx'; //extensão do arquivo excel
@Injetável({ Fornecido em: 'raiz' }) 
exportaraulaExcelServiçoServiço{ 
construtor () { }
públicoExportar para Excel(elemento: qualquer, fileName: string): vazio{
// gera pasta de trabalho e adiciona a planilha
const ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet (elemento);
const pasta de trabalho: XLSX.WorkBook = XLSX.utils.book_new(); 
// salvar em arquivo
 XLSX.utils.book_append_sheet (pasta de trabalho, ws, 'Folha1');
 XLSX.writeFile (pasta de trabalho, ${fileName}${EXCEL_EXTENSION}); 
 }
}

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

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

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

Em seguida, adicione a planilha à pasta de trabalho com o livro_apêndice_folha método e salve-o em um arquivo usando escreverArquivo.

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

importar { Serviço Excel } de'./excel.service';

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

construtor(excelService privado: ExcelService) { 
... 
}

Então você pode prosseguir para implementar a função (exportarExcel) onde você usará o Exportar para Excel método para exportar JSON para Excel. O código abaixo demonstra como fazer isso.

exportExcel(): vazio { 
const arquivoToExport = esse.apiJsonResponseData.map((itens: qualquer) => { 
retornar {
"ID do usuário": itens?.userId,
"Eu ia": itens?.id,
"Título": itens?.título,
"Corpo": itens?.corpo
 } 
 });
esse.excelService.Exportar para Excel(
 arquivoParaExportar,
'seuArquivoExcel-' + novoData().getTime() + '.xlsx'
 );
}

No código acima, você definiu o exportarExcel método para chamar o Exportar para Excel método do ExcelServiço. A nova variável, arquivoParaExportar, armazena os dados a serem exportados. O apiJsonResponseData array contém os dados JSON obtidos da resposta da API.

Posteriormente, o Exportar para Excel método do ExcelServiço leva o arquivoParaExportar e seu preferido nome do arquivo. Observe como você pode anexar o carimbo de data/hora atual ao nome do arquivo para garantir que 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 adicioná-la facilmente como um manipulador de eventos para um clique evento ou usá-lo de qualquer outra forma adequada com base em suas necessidades.

Você pode ver um exemplo de uso dessa 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:

Quando você clicar no Exportar Dados para Excel botão, seu navegador fará o download do arquivo Excel. Quando você abra o arquivo XLSX, o arquivo de planilha de saída terá esta aparência:

A biblioteca Xlsx pode fazer muito mais do que converter JSON para o formato Excel. Ele oferece uma biblioteca robusta e oferece suporte a vários formatos de arquivo que você pode encontrar nos negócios. Confira a Documentação da biblioteca Xlsx no npm para saber mais sobre isso.

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 da web. As etapas que você executou aqui permitem transformar dados JSON de uma API em uma planilha do Excel bem organizada. Você também pode converter dados do Excel de volta para JSON usando outras funções na biblioteca.

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