Cómo convertir datos JSON a una hoja de cálculo de Excel con Angular

Como desarrollador, estás abierto a enfrentar nuevos desafíos diariamente en diferentes proyectos en los que puedes estar trabajando. Las aplicaciones web a veces tienen que realizar algunas tareas adicionales para lograr diferentes objetivos según los requisitos comerciales o técnicos.

Es posible que deba recopilar datos de una API y procesarlos en un formato diferente, como PDF, XML, DOCX o XLSX.

En esta guía, aprenderá cómo transformar los datos JSON recibidos de una respuesta API en una hoja de cálculo de Excel bien organizada en su aplicación Angular.

¿Qué es la biblioteca XLSX?

La biblioteca Xlsx es un recurso eficaz para los desarrolladores de Angular que desean transformar los datos JSON de una respuesta API en una hoja de cálculo de Excel ordenada. Mediante el uso de este módulo, los desarrolladores pueden descargar y modificar rápidamente los datos JSON.

Puede usar la biblioteca Xlsx para crear informes para su equipo o para presentar datos de nuevas formas. Si desea una forma rápida y fácil de administrar sus datos en aplicaciones de JavaScript, esta es una buena opción.

Cómo configurar la biblioteca XLSX con una aplicación angular

Antes de comenzar con la biblioteca Xlsx en su aplicación Angular, es importante tener un entorno de desarrollo Node.js y Angular configurado en su máquina. Con Node.js instalado, Angular es fácil de configurar ejecutando npm instalar -g @angular/cli en una terminal.

Cree un nuevo proyecto Angular ejecutando ng nuevo [tu-nombre-de-aplicación-angular] en la terminal Luego navegue al directorio del proyecto como se ve a continuación:

También puede iniciar un servidor de desarrollo local ejecutando ng servir --o, que le permite ver su aplicación Angular y los cambios realizados en vivo en el navegador.

Habiendo configurado una aplicación Angular, instalar la biblioteca Xlsx es un proceso simple que puede completar simplemente ejecutando npm instalar xlsx --save. Este comando instalará las dependencias necesarias para usar la biblioteca Xlsx.

Cómo convertir datos JSON a formato XLSX en Angular

Con Angular CLI, puede generar un nuevo servicio ejecutando el ng generar servicio [nombre del servicio] comando en la terminal. Por ejemplo, en este caso, puede generar el servicio de Excel que necesita usando ng generar servicio ExcelService.

Este generar El comando creará el archivo de servicio: ExcelService.servicio.ts, en el origen/aplicación directorio del proyecto. El archivo se ve así por defecto:

importar { Inyectable } de'@angular/núcleo'; 
@Inyectable({ proporcionada en: 'raíz' }) 
exportarclaseExcelServiceService{
constructor() { } 
}

Este ExcelServicio El archivo manejará la funcionalidad para exportar datos a formato Excel. Actualizar el ExcelService.servicio.ts archivo para parecerse al siguiente código:

importar { Inyectable } de'@angular/núcleo'; 
importar * como XLSX de'xlsx'; 
constante EXCEL_EXTENSIÓN = '.xlsx'; //extensión del archivo excel
@Inyectable({ proporcionada en: 'raíz' }) 
exportarclaseExcelServiceService{ 
constructor () { }
públicoExportar a Excel(elemento: cualquiera, nombre de archivo: cadena): vacío{
// genera el libro de trabajo y agrega la hoja de trabajo
constante ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet (elemento);
constante libro de trabajo: XLSX.WorkBook = XLSX.utils.book_new(); 
// Guardar en archivo
 XLSX.utils.book_append_sheet (libro de trabajo, ws, 'Hoja1');
 XLSX.writeFile (libro de trabajo, ${nombre de archivo}${EXCEL_EXTENSIÓN}); 
 }
}

En el código anterior, importas el xlsx biblioteca y crear una variable constante, EXCEL_EXTENSIÓN para almacenar la extensión del archivo de Excel.

El Exportar a Excel El método acepta dos parámetros: elemento y Nombre del archivo. El parámetro del elemento representa los datos para exportar al archivo de Excel, mientras que el Nombre del archivo parámetro es el nombre del archivo de Excel.

Para exportar los datos al archivo de Excel, cree una hoja de trabajo usando el json_to_sheet método de la biblioteca Xlsx. También cree un libro de trabajo usando la biblioteca libro_nuevo método.

Luego, agregue la hoja de trabajo al libro de trabajo con el book_append_sheet y guárdelo en un archivo usando escribir archivo.

Anteriormente, creó un servicio de Excel para facilitar el proceso de descarga y conversión de datos JSON a una hoja de Excel. Para utilizar este servicio, debe crear el componente angular relevante e importe el archivo de servicio en él.

importar { Servicio Excel } de'./excel.servicio';

A continuación, debe inyectarlo en el constructor del componente de esta manera:

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

Entonces puede seguir adelante para implementar la función (exportarExcel) donde utilizará el Exportar a Excel método para exportar JSON a Excel. El siguiente código muestra cómo hacer esto.

exportarExcel(): vacío { 
constante archivo a exportar = este.apiJsonResponseData.map((artículos: cualquiera) => { 
devolver {
"Identificación de usuario": elementos? .userId,
"Identificación": artículos?.id,
"Título": artículos?.título,
"Cuerpo": artículos?.cuerpo
 } 
 });
este.excelService.Exportar a Excel(
 archivo para exportar,
'su archivo de Excel-' + nuevoFecha().obtenerTiempo() + '.xlsx'
 );
}

En el código anterior, ha definido el exportarExcel método para llamar al Exportar a Excel metodo de la ExcelServicio. La nueva variable, archivo para exportar, almacena los datos para exportar. El apiJsonResponseData array contiene los datos JSON obtenidos de la respuesta de la API.

Posteriormente, el Exportar a Excel metodo de la ExcelServicio toma el archivo a exportar y tu preferido Nombre del archivo. Observe cómo puede agregar la marca de tiempo actual al nombre del archivo para asegurarse de que sea único. Este método convertirá los datos JSON y los exportará a un archivo XLSX que luego podrá obtener una vista previa en Excel.

Esta función ahora está disponible para usar en cualquier parte de su aplicación Angular, y puede agregarla fácilmente como un controlador de eventos para un hacer clic evento o utilizarlo de cualquier otra forma adecuada en función de sus necesidades.

Puede ver un ejemplo de uso de esta funcionalidad en la imagen a continuación. Los datos JSON de una API externa se representan en la página, con un botón para Exportar datos a Excel:

Cuando haces clic en el Exportar datos a Excel botón, su navegador descargará el archivo de Excel. Cuando usted abre el archivo XLSX, el archivo de hoja de cálculo de salida se ve así:

La biblioteca Xlsx puede hacer mucho más que convertir JSON a formato Excel. Ofrece una biblioteca robusta y admite varios formatos de archivo que puede encontrar en los negocios. Revisar la Documentación de la biblioteca Xlsx en npm para saber más al respecto.

Conversión de datos de JSON a hojas de cálculo de Excel en Angular

Puede usar la biblioteca Xlsx para manipular fácilmente las hojas de cálculo de Excel en su aplicación web. Los pasos que ha llevado a cabo aquí le permiten transformar los datos JSON de una API en una hoja de cálculo de Excel bien organizada. También puede volver a convertir datos de Excel a JSON utilizando otras funciones de la biblioteca.

Una buena forma de practicar el uso de esta biblioteca es crear una aplicación que genere informes semanales o mensuales a partir de una API y los organice como datos de Excel.