Convertir JSON a Excel con Vue JS

Crear un archivo ‘xlsx’ con Node parece dificil pero es más fácil de lo que parece, veremos un ejemplo desde la creación de un proyecto con Vue

Primero es necesario instalar Node.js y Visual Studio Code

Download | Node.js

Visual Studio Code - Code Editing. Redefined

Para crear un proyecto con ‘Vue’ es necesario primero instalar @vue/cli

npm install -g @vue/cli yarn

Ahora hay que crear el proyecto con Vue CLI

vue create vue-demo

Para ejecutar el proyecto hay que ejecutar ‘npm run serve’ dentro del proyecto

cd vue-demo; npm run serve

Si visitas ‘http://localhost:8080’ puedes ver la aplicación funcionando

http://localhost:8080

Para detener el servidor de desarrollo hay que presionar ‘Ctrl + C’ en la consola. Luego de haberlo detenido debemos instalar el paquete ‘json-as-xlsx’

npm install json-as-xlsx

Hay que abrir el proyecto con Visual Studio Code e iniciar de nuevo el servidor de desarrollo

code .; npm run serve

Reemplaza el código del archivo ‘src/components/HelloWorld.vue’ con lo de este archivo https://github.com/malteada/converting-json-xlsx/blob/main/src/components/HelloWorld.vue

https://raw.githubusercontent.com/malteada/converting-json-xlsx/main/src/components/HelloWorld.vue

Al hacer el cambio del archivo y refrescar el navegador veremos la siguiente vista, donde al presionar ‘Download’ descarga el archivo ‘xlsx’

Resultado final

El código de este proyecto se encuentra disponible en https://github.com/malteada/converting-json-xlsx