基于 Next.js 实现在线 Excel

2022-08-04 13:53:41 +08:00
 GrapeCityChina

如果要从头开始使用 React 构建一个完整的 Web 应用程序,需要哪些步骤? 这当然不像把大象装进冰箱那么简单,只需要分成三步:打开冰箱,拿起大象,塞进冰箱就好。

我们需要考虑细节有很多,比如:

认识 Next.js

Next.js 是一款 React 开发框架,它可以帮助我们构建 React 应用程序。作为一个轻量级 React 服务端渲染应用框架,它有许多内置功能,包括不仅限于:

接下来,我们将带大家基于 Next.js 实现类 Excel 控件的在线表格编辑的功能。

实战之旅

首先需要安装 Node.js ,并且 Node.js 版本需要高于 10.13 , 安装流程可以参考: https://nodejs.org/en/ 安装完成后,就可以创建 Next.js 应用。 打开终端窗口,进入到创建应用的程序目录,然后执行以下命令:

# 其背后的工作是通过调用 create-next-app 工具完成的,该工具会创建一个 Next.js 应用程序。
npx create-next-app nextjs-spreadjs

安装完成后执行npm run dev,如果项目能正常启动,就表示工程已经正常创建,默认创建好的工程会启动在 3000 端口,展示如下:

然后可以将项目 pages 下的 index.js 中一些不必要的内容元素删除,在项目更路径下面加载我们接下来写好的类 Excel 表格控件.

最终展示效果如图:

其中红色区域为表格主体,上方的工具栏是在线表格编辑器。在实际项目中,我们可以单独引入组件运行时,也可以将在线表格编辑区全部引入(在线表格编辑器会包含一个与之关联的运行时)。 首先,我们需要在 package.json 中加入如下依赖:

"@grapecity/spread-sheets": "15.1.0",
"@grapecity/spread-sheets-react": "15.1.0",
"@grapecity/spread-excelio": "15.1.0",
"@grapecity/spread-sheets-charts": "15.1.0",
"@grapecity/spread-sheets-print": "15.1.0",
"@grapecity/spread-sheets-pdf": "15.1.0",
"@grapecity/spread-sheets-barcode": "15.1.0",
"@grapecity/spread-sheets-shapes": "15.1.0",
"@grapecity/spread-sheets-resources-zh": "15.1.0",
"@grapecity/spread-sheets-languagepackages": "15.1.0",
"@grapecity/spread-sheets-pivot-addon": "15.1.0",
"@grapecity/spread-sheets-tablesheet": "15.1.0",
"@grapecity/spread-sheets-designer": "15.1.0",
"@grapecity/spread-sheets-designer-resources-cn": "15.1.0",
"@grapecity/spread-sheets-designer-react": "15.1.0"

接下来,我们在项目根目录下新建 components 文件夹,并创建 OnlineDesigner.js 文件,在该文件中,我们引入 spreadjs 相关资源,并引入组件运行时。详细代码如下所示:

import React,{useState,useEffect} from "react"
import '@grapecity/spread-sheets-resources-zh';
import GC from '@grapecity/spread-sheets'
import {SpreadSheets,Worksheet} from '@grapecity/spread-sheets-react'
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013lightGray.css'
GC.Spread.Common.CultureManager.culture("zh-cn");




export default function OnlineSpread(){
    const [spread,setSpread] = useState(null)
    const initSpread = (entity) => {
        setSpread(entity)
        //获取活动工作表

        let sheet = entity.getActiveSheet()
        //设置数据
        sheet.setValue(0,0,'Grapecity')
    }
    return(
        <>
            <SpreadSheets
                hostStyle={{height:'98vh'}}
                workbookInitialized={initSpread}
            ></SpreadSheets>
        </>
       
    )
}

创建完成之后,我们需要在 pages 目录下的 index.js 中引入定义好的组件。这里要注意的时,在引入组件时不要去使用服务端渲染( SSR ),否会出现 document undefined 的错误,这种错误,一般和 nodejs 无法操作 dom 对象有关,具体的引入方法为:

const OnlineSpread = dynamic(() => import('../components/OnlineSpread.js'),{
  ssr: false
})

引入完成之后,我们就可以在当前页面中使用了,精简 index.js 中的代码,最终代码如下:
import Head from 'next/head'
import Image from 'next/image'
import dynamic from 'next/dynamic'


const OnlineSpread = dynamic(() => import('../components/OnlineSpread.js'),{
  ssr: false
})


const OnlineDesigner = dynamic(() => import('../components/OnlineDesigner.js'),{
  ssr: false
})


export default function Home() {
  return (
    <div>
        <Head>
          <title>Nextjs-SPreadJS</title>
          <meta name="description" content="Generated by create next app" />
        </Head>
        <OnlineSpread/>
    </div>
     
  )
}


执行 npm run dev ,显示效果如下:

接下来。我们需要继续在 components 文件夹下新建一个 OnlineDesigner.js ,引入在线表格编辑器:

import React,{useState,useEffect} from "react"
import '@grapecity/spread-sheets-designer-resources-cn';
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"
import '@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css'
import "@grapecity/spread-sheets-tablesheet";
import "@grapecity/spread-sheets-barcode";
import "@grapecity/spread-sheets-charts";
import "@grapecity/spread-sheets-shapes";
import "@grapecity/spread-sheets-languagepackages";
import "@grapecity/spread-sheets-print";
import "@grapecity/spread-sheets-pdf";
import "@grapecity/spread-sheets-pivot-addon";
import "@grapecity/spread-sheets-resources-zh";
import "@grapecity/spread-sheets-designer-resources-cn";
import {Designer} from '@grapecity/spread-sheets-designer-react';
import "@grapecity/spread-sheets-resources-zh"
import GC from "@grapecity/spread-sheets"
GC.Spread.Common.CultureManager.culture('zh-cn')

export default function OnlineDesigner(){
    const [designer,setDesigner] = useState(null)
    const initDesigner = (entity) => {
        setDesigner(entity)
        let spread = entity.getWorkbook()
        let sheet = spread.getActiveSheet()
        sheet.setValue(0,0,'Grapecity')
    }
    return(
        <>
            <Designer
                styleInfo={{height:'98vh'}}
                designerInitialized={initDesigner}
            ></Designer>
        </>
       
)

}

编写完成之后,在 index.js 中引入集成即可:

import Head from 'next/head'
import Image from 'next/image'
import dynamic from 'next/dynamic'

const OnlineDesigner = dynamic(() => import('../components/OnlineDesigner.js'),{
  ssr: false
})

export default function Home() {
  return (
    <div>
        <Head>
          <title>Nextjs-SPreadJS</title>
          <meta name="description" content="Generated by create next app" />
        </Head>
       {/* <OnlineSpread/> */}
       <OnlineDesigner/>
    </div>
     
  )
}

执行 npm run dev ,显示效果如下:

到这里我们就顺利完成了基于 Next.js 实现在线表格编辑功能。 本文内实例获取地址: https://gitee.com/GrapeCity/nextjs-spreadjs

大家如果对更多应用实例感兴趣,可以查看: https://demo.grapecity.com.cn/spreadjs/gc-sjs-samples/index.html

848 次点击
所在节点    推广
0 条回复

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/870638

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX