当前位置：网站首页>Online Excel based on Next.js

Online Excel based on Next.js

2022-08-04 15:07:00 【51CTO】

If you want to start from scratch React 构建一个完整的 Web 应用程序,需要哪些步骤？
It's certainly not as simple as putting an elephant in the fridge,Just divide it into three steps：打开冰箱,拿起大象,Just put it in the fridge.

基于 Next.js实现在线Excel_css

There are many details we need to consider,比如：

A packer must be used（例如 webpack）打包代码,并使用 Babel Wait for the compiler to convert the code.
It needs to be optimized for production environments,例如代码拆分.
Some pages need to be pre-rendered to improve page performance and performance SEO,Might also want to use server-side rendering or client-side rendering.
Some server-side code has to be written to get the React The application connects to the data store.
These issues are all we need to pay attention to,但是Next.js的出现,完美地解决了这些问题,You can get them all with one frame.
Next.jsThe framework has the right level of abstraction and is great“开发人员体验”,包括静态及服务器端融合渲染、支持 TypeScript、智能化打包、路由预取等功能,无需任何配置,开箱即用,These are things that development teams have when they write code“Serve with chocolate on a rainy day”A generally silky experience.

基于 Next.js实现在线Excel_在线表格_02

认识 Next.js

Next.js是一款React 开发框架,It helps us build React 应用程序.作为一个轻量级React服务端渲染应用框架,It has many built-in functions,包括不仅限于：

直观的、基于页面的路由系统（并支持动态路由）
预渲染——支持在页面级的静态生成 (SSG) 和服务器端渲染 (SSR)
自动代码拆分,提升页面加载速度
Client-side routing with optimized prefetching
内置 CSS 和 Sass 的支持,并支持任何 CSS-in-JS 库
The development environment supports fast refresh
利用 Serverless Functions 及 API 路由构建 API 功能
完全可扩展
当前,Next.js is being used by tens of thousands of websites and Web 应用程序,Including many world-renowned well-known companies and head brands.可以说,Its visible ease of use has firmly captured the hearts of users,Whether it is for enterprise users or small and micro developers,From basic framework to release operation and maintenance,It all provides corresponding solutions.

基于 Next.js实现在线Excel_在线表格_03

接下来,We'll take everyone based on thatNext.js实现类ExcelThe online form editing function of the control.

实战之旅

首先需要安装Node.js,并且Node.js版本需要高于10.13,
You can refer to the installation process： https://nodejs.org/en/
安装完成后,就可以创建Next.js应用.
打开终端窗口,Go to the program directory where the application was created,然后执行以下命令：

安装完成后执行npm run dev,If the project can start normally,It means that the project has been created normally,The project created by default will start at3000端口,展示如下：

基于 Next.js实现在线Excel_应用程序_04

The item can then be movedpages下的index.jsSome unnecessary content elements are removed,Load the class we wrote next under the project pathExcel表格控件.

最终展示效果如图：

基于 Next.js实现在线Excel_css_05

The red area is the main body of the table,The upper toolbar is the online form editor.在实际项目中,We can introduce component runtimes individually,You can also import all the online form editing areas（The online table editor will have a runtime associated with it）.
首先,我们需要在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"

     
      1.
      2.
      3.
      4.
      5.
      6.
      7.
      8.
      9.
      10.
      11.
      12.
      13.
      14.
      15.

接下来,我们在项目根目录下新建components文件夹,并创建OnlineDesigner.js文件,在该文件中,我们引入spreadjs相关资源,And introduce the component runtime.详细代码如下所示：

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>
        </>
       
    )
}

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.

创建完成之后,我们需要在pages目录下的index.jsIntroduce defined components.这里要注意的时,Don't use server-side rendering when importing components（SSR）,will appeardocument undefined的错误,这种错误,一般和nodejs无法操作dom对象有关,The specific introduction method is：

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

引入完成之后,We can use it in the current page,精简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>
     
  )
}



     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.

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

基于 Next.js实现在线Excel_css_06

接下来.我们需要继续在components文件夹下新建一个OnlineDesigner.js,Introduce online form editor：

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>
        </>
       
)

}

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.

编写完成之后,在index.jsIntegration can be introduced in：

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>
     
  )
}

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

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

基于 Next.js实现在线Excel_应用程序_07

Here we have successfully completed the basisNext.jsRealize online form editing function.
The example in this article gets the address： https://gitee.com/GrapeCity/nextjs-spreadjs

If you are interested in more application examples,可以查看：
https://demo.grapecity.com.cn/spreadjs/gc-sjs-samples/index.html

原网站

版权声明
本文为[51CTO]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/216/202208041500373667.html