关于前端:基于-Nextjs实现在线Excel

如果要从头开始应用 React 构建一个残缺的 Web 应用程序，须要哪些步骤？
这当然不像把大象装进冰箱那么简略，只须要分成三步：关上冰箱，拿起大象，塞进冰箱就好。

咱们须要思考细节有很多，比方：

必须应用打包程序（例如 webpack）打包代码，并应用 Babel 等编译器进行代码转换。
须要针对生产环境进行优化，例如代码拆分。
须要对一些页面进行事后渲染以进步页面性能和 SEO，可能还心愿应用服务器端渲染或客户端渲染。
必须编写一些服务器端代码能力将 React 应用程序连贯到数据存储。
这些问题都是咱们须要留神的，然而Next.js的呈现，完满地解决了这些问题，用一个框架即可通通拿下。
Next.js框架具备正确的形象级别和杰出的“开发人员体验”，包含动态及服务器端交融渲染、反对 TypeScript、智能化打包、路由预取等性能，无需任何配置，开箱即用，这些内容让开发团队在编写代码时有“下雨天配巧克力”个别丝滑的体验。

意识 Next.js

Next.js是一款React 开发框架，它能够帮忙咱们构建 React 应用程序。作为一个轻量级React服务端渲染利用框架，它有许多内置性能，包含不仅限于：

直观的、基于页面的路由零碎（并反对动静路由）
预渲染——反对在页面级的动态生成 (SSG) 和服务器端渲染 (SSR)
主动代码拆分，晋升页面加载速度
具备通过优化的预取性能的客户端路由
内置 CSS 和 Sass 的反对，并反对任何 CSS-in-JS 库
开发环境反对疾速刷新
利用 Serverless Functions 及 API 路由构建 API 性能
齐全可扩大
以后，Next.js 正在被用于数以万计的的网站和 Web 应用程序，包含许多享誉世界的出名公司和头部品牌。能够说，它肉眼可见的易用性牢牢把握了用户的心，不论是对于企业用户还是小微开发者，从根底框架到公布运维，它都提供了绝对应的解决方案。

接下来，咱们将带大家基于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/n...

大家如果对更多利用实例感兴趣，能够查看：
https://demo.grapecity.com.cn...