如何在 Next.js 中添加可下载的电子表格？

在本文中，我们将学习如何在 NextJs 中添加可下载的电子表格。 NextJS 是一个基于 React 的框架。它有能力为 Windows、Linux 和 mac 等不同平台开发漂亮的 Web 应用程序。动态路径的链接有助于有条件地渲染 NextJS 组件。

方法：要添加我们的可下载电子表格，我们将使用 react-xls 包。 react-xls 包可帮助我们在应用程序的任何位置添加可下载的电子表格。所以首先，我们将安装 react-xls 包，然后我们将在我们的主页上添加一个可下载的电子表格。

创建 NextJS 应用程序：您可以使用以下命令创建一个新的 NextJs 项目：

npx create-next-app gfg

安装所需的包：现在我们将使用以下命令安装 react-xls 包：

npm i react-xls

项目结构：它看起来像这样。

添加电子表格：安装 react-xls 包后，我们可以轻松地将可下载的电子表格添加到我们的应用程序中。对于这个例子，我们将把可下载的电子表格添加到我们的主页。

在index.js文件中添加以下内容：

Javascript

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 (
    

      
GeeksforGeeks - Downloadable Spreadsheet
      
        Download the Spreadsheet
      
    
  );
}
  
export default App;

说明：在上面的例子中，我们首先从已安装的包中导入 useExcelDownloader。之后，我们将创建一个新的数据变量，我们将在其中存储电子表格的数据。然后我们将使用 useExcelDownloader 将此数据添加到可下载的电子表格中。

运行应用程序的步骤：在终端中运行以下命令来运行应用程序。

npm run dev

输出：