¿Cómo agregar una hoja de cálculo descargable en Next.js?

En este artículo, vamos a aprender cómo podemos agregar una hoja de cálculo descargable en NextJs. NextJS es un marco basado en React. Tiene el poder de desarrollar hermosas aplicaciones web para diferentes plataformas como Windows, Linux y Mac. La vinculación de rutas dinámicas ayuda a representar sus componentes NextJS de forma condicional.

Enfoque: para agregar nuestra hoja de cálculo descargable, vamos a utilizar el paquete react-xls. El paquete react-xls nos ayuda a agregar una hoja de cálculo descargable en cualquier lugar de nuestra aplicación. Primero, instalaremos el paquete react-xls y luego agregaremos una hoja de cálculo descargable en nuestra página de inicio.

Crear aplicación NextJS: puede crear un nuevo proyecto NextJs usando el siguiente comando:

npx create-next-app gfg

Instale el paquete requerido: ahora instalaremos el paquete react-xls usando el siguiente comando:

npm i react-xls

Estructura del proyecto: Se verá así.

Agregar la hoja de cálculo: podemos agregar fácilmente la hoja de cálculo descargable en nuestra aplicación después de instalar el paquete react-xls. Para este ejemplo, agregaremos la hoja de cálculo descargable a nuestra página de inicio.

Agregue el siguiente contenido en el archivo index.js :

import React from 'react';
import { useExcelDownloder } from 'react-xls';
  
function App() {
  const { ExcelDownloder, Type } = useExcelDownloder();
  
  const data = {
    Data1: [
      { name: 'gfg1', category: 'gfg4' },
      { name: 'gfg2', category: 'gfg5' },
      { name: 'gfg3', category: 'gfg6' },
    ],
    // Worksheet named pokemons
    Data2: [
      { name: 'gfg1', category: 'gfg1' },
      { name: 'gfg1', category: 'gfg1' },
      { name: 'gfg1', category: 'gfg1' },
    ],
  };
  
  return (
    <div>
      <h3>GeeksforGeeks - Downloadable Spreadsheet</h3>
      <ExcelDownloder
        data={data}
        filename={'book'}
        type={Type.Button} // or type={'button'}
      >
        Download the Spreadsheet
      </ExcelDownloder>
    </div>
  );
}
  
export default App;

Explicación: en el ejemplo anterior primero, estamos importando useExcelDownloader desde el paquete instalado. Después de eso, estamos creando una nueva variable de datos en la que almacenaremos los datos para nuestra hoja de cálculo. Luego agregaremos estos datos en una hoja de cálculo descargable usando useExcelDownloader.

Pasos para ejecutar la aplicación: Ejecute el siguiente comando en la terminal para ejecutar la aplicación.

npm run dev

Producción: