基于Next.js的在线Excel

使用React从头开始??构建一个完整的Web应用程序需要哪些步骤？当然，这不是把大象放进冰箱那么简单。只需要分为三步：打开冰箱，拿起大象，放入冰箱。有很多细节需要我们考虑，比如：代码必须用bundler（比如webpack）打包，用babel这样的编译器转译。需要对生产环境进行优化，例如代码拆分。有些页面需要预渲染以提高页面性能和SEO，您可能还想使用服务器端渲染或客户端渲染。必须编写一些服务器端代码以将React应用程序连接到数据存储。这些问题都是我们需要关注的，但是Next.js的出现完美的解决了这些问题，而且都可以用一个框架来解决。Next.js框架抽象层次恰到好处，“开发者体验”极佳，包括静态和服务端融合渲染、支持TypeScript、智能打包、路由预取等功能，无需任何配置，开箱即用，这些内容让开发团队在编写代码时有“未雨绸缪巧克力”的丝滑体验。认识Next.jsNext.js是一个React开发框架，可以帮助我们构建React应用程序。作为一个轻量级的React服务端渲染应用框架，它内置了许多特性，包括但不限于：直观的、基于页面的路由系统（并支持动态路由）预渲染——支持静态生成（SSG）在页面级别和服务器端渲染(SSR)自动代码拆分以加快页面加载速度具有优化的预取功能的客户端路由内置对CSS和Sass的支持，并支持任何CSS-in-JS库开发环境支持利用ServerlessFunctions和APIRouting实现快速刷新API功能完全可扩展目前，Next.js正在数以万计的网站和Web应用程序中使用，其中包括许多世界知名公司和领先品牌。可以说，其看得见的易用性牢牢抓住了用户的心。无论是针对企业用户还是小微开发者，都提供从基础框架到发布运维的相应解决方案。下面我们就带大家实现基于Next.js的类Excel控件的在线表格编辑功能。实战之旅首先需要安装Node.js，Node.js版本需要高于10.13。安装过程可以参考：https://nodejs.org/en/安装完成后，就可以创建一个Next.js应用了。打开终端窗口，进入创建应用程序的程序目录，执行以下命令：#其背后的工作是通过调用create-next-app工具完成的，它创建了一个Next.js应用程序。npxcreate-next-appnextjs-spreadjs安装完成后，执行npmrundev。如果项目可以正常启动，说明项目已经正常创建。默认情况下，创建的项目会在3000端口启动，如下图：然后可以下载项目页面删除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相关资源，导入componentruntime详细代码如下：importReact,{useState,useEffect}from"react"import'@grapecity/spread-sheets-resources-zh';importGCfrom'@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");出口defaultfunctionOnlineSpread(){const[spread,setSpread]=useState(null)constinitSpread=(entity)=>{setSpread(entity)//获取活动表letsheet=entity.getActiveSheet()//设置数据表.setValue(0,0,'Grapecity')}return(<>)}创建完成后，我们需要在create目录下将定义好的组件导入到index.js中。这里需要注意的是，在引入组件的时候，不要使用服务端渲染（SSR），否则会出现文档未定义的错误。这个错误一般与nodejs无法操作dom对象有关。具体引入方法为：constOnlineSpread=dynamic(()=>import('../components/OnlineSpread.js'),{ssr:false})引入完成后，我们就可以在当前页面使用了，简化index.js中的代码，最终代码如下：'../components/OnlineSpread.js'),{ssr:false})constOnlineDesigner=dynamic(()=>import('../components/OnlineDesigner.js'),{ssr:false})export默认函数Home(){return(

)}执行npmrundev，显示效果如下：我们需要继续在components文件夹下新的OnlineDesigner.js，引入在线表格编辑器：importReact,{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”；导入“@grapecity/spread-sheets-barcode”；导入“@grapecity/spread-sheets-charts”；导入“@grapecity/spread-sheets-shapes”；导入“@grapecity/spread-sheets-languagepackages”；导入“@grapecity/spread-sheets-print”；导入“@grapecity/spread-sheets-pdf”；导入“@grapecity/spread-sheets-pivot-addon”；导入“@grapecity/spread-sheets-resources-zh";import"@grapecity/spread-sheets-designer-resources-cn";从'@grapecity/spread-sheets-designer-react'导入{Designer};import"@grapecity/spread-sheets-resources-zh"从"@grapecity/spread-sheets"导入GC.Spread.Common.CultureManager.culture('zh-cn')导出默认函数OnlineDesigner(){const[designer,setDesigner]=useState(null)constinitDesigner=(entity)=>{setDesigner(entity)letspread=entity.getWorkbook()letsheet=spread.getActiveSheet()sheet.setValue(0,0,'Grapecity')}return(<>)}编写完成之后，在index.js中导入集合即可：importHeadfrom'next/head'importImagefrom'next/image'importdynamicfrom'next/dynamic'constOnlineDesigner=dynamic(()=>import('../components/OnlineDesigner.js'),{ssr:false})exportdefaultfunctionHome(){return(