在 NextJS 中使用 SpreadJS

SpreadJS 支持 NextJS：一个基于 React 的框架，它可以让你为不同的平台开发 Web 应用程序，如 Windows、Linux 和 Mac。

NextJS 提供生产所需的所有功能，无论是 TypeScript 支持、混合静态和服务器渲染、路由预取还是智能捆绑。

有关详细信息，请参阅 https://nextjs.org/docs/getting-started。

在本教程中，我们构建了一个使用 SpreadJS 的 Next.js 应用程序。

type=warning

注意：安装的 nodejs 版本应大于 v14

创建 Next.js 应用程序

创建 Next.js 应用程序的最简单方法是使用创建下一个应用程序工具。

1. 从命令提示符或终端运行以下命令以创建 Next.js TypeScript 项目。

   npx create-next-app@latest nextjs-with-spreadjs --use-npm  

   当终端提示配置信息时，选择需要的选项并回车确认。在终端安装并创建项目时稍等片刻。

2. 在终端中键入以下命令。

   cd nextjs-with-spreadjs
   npm run dev

3. 使用浏览器打开以下链接。然后你会看到NextJS的欢迎页面。

   http://localhost:3000/

4. 关闭当前终端。使用 Visual Studio Code 或 IDE 打开 nextjs-with-spreadjs 文件夹。

安装 SpreadJS

1. 安装 SpreadJS 包。

   npm install @grapecity/spread-sheets-react

   创建一个名为components的文件夹，如果它不存在于应用程序的根文件夹中。

2. 创建一个名为SpreadSheet.jsx的 JavaScript XML 文件，并将其添加到组件文件夹中，并在其中添加以下代码。

   “use client“;
   
   import React, {  useState } from "react";
   import { SpreadSheets, Worksheet, Column } from "@grapecity/spread-sheets-react";
   import * as GC from "@grapecity/spread-sheets";
   
   export default function SpreadSheet() {
   
       const [spreadBackColor, setSpreadBackColor] = useState('aliceblue');
       const [sheetName, setSheetName] = useState('Empolyees');
       const [hostStyle, setHostStyle] = useState({
           width: '100%',
           height: '700px'
       });
       const dataArr = [
           {
               "jobTitleName": "Developer",
               "preferredFullName": "Romin Irani",
               "region": "CA",
               "phoneNumber": "408-1234567"
           },
           {
               "jobTitleName": "Developer",
               "preferredFullName": "Neil Irani",
               "region": "CA",
               "phoneNumber": "408-1111111"
           },
           {
               "jobTitleName": "Program Directory",
               "preferredFullName": "Tom Hanks",
               "region": "CA",
               "phoneNumber": "408-2222222"
           }
       ];
       const [data, setData] = useState(dataArr);
       const [columnWidth, setColumnWidth] = useState(200);
       return (
           <SpreadSheets backColor={spreadBackColor} hostStyle={hostStyle}>
               <Worksheet name={sheetName} dataSource={data}>
                   <Column dataField='preferredFullName' width={columnWidth}></Column>
                   <Column dataField='jobTitleName' width={columnWidth}></Column>
                   <Column dataField='phoneNumber' width={columnWidth}></Column>
                   <Column dataField='region' width={columnWidth}></Column>
               </Worksheet>
           </SpreadSheets>);
   }

3. 更改索引文件内容。用以下代码替换app/page.tsx文件的默认内容。

   import dynamic from "next/dynamic";
   
   const SpreadSheet = dynamic(
     () => {
       return import("../components/SpreadSheet");
     },
     { ssr: false }
   );
   
   export default function Home() {
     return (
       <div>
         <h1>
         Next.JS + Spreadsheets demo
         </h1>
         <SpreadSheet />
       </div>
     )
   }

导入样式

通过在app文件夹中的globals.css文件中添加以下行，将SpreadJS CSS 导入到应用程序中。

@import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful';

运行和测试应用程序

您可以使用 npm run dev 命令运行该应用程序。默认情况下，该项目在 http://localhost:3000/ 运行。