欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于Next.js實(shí)現(xiàn)在線Excel的詳細(xì)代碼

 更新時(shí)間：2022年08月05日 09:25:33   作者：葡萄城技術(shù)團(tuán)隊(duì)  
Next.js是一款React 開發(fā)框架，它可以幫助我們構(gòu)建 React 應(yīng)用程序。作為一個(gè)輕量級(jí)React服務(wù)端渲染應(yīng)用框架，這篇文章主要介紹了基于?Next.js實(shí)現(xiàn)在線Excel,需要的朋友可以參考下

如果要從頭開始使用 React 構(gòu)建一個(gè)完整的 Web 應(yīng)用程序，需要哪些步驟？
這當(dāng)然不像把大象裝進(jìn)冰箱那么簡(jiǎn)單，只需要分成三步：打開冰箱，拿起大象，塞進(jìn)冰箱就好。

我們需要考慮細(xì)節(jié)有很多，比如：

  • 必須使用打包程序（例如 webpack）打包代碼，并使用 Babel 等編譯器進(jìn)行代碼轉(zhuǎn)換。
  • 需要針對(duì)生產(chǎn)環(huán)境進(jìn)行優(yōu)化，例如代碼拆分。需要對(duì)一些頁(yè)面進(jìn)行預(yù)先渲染以提高頁(yè)面性能和 SEO，可能還希望使用服務(wù)器端渲染或客戶端渲染。
  • 必須編寫一些服務(wù)器端代碼才能將 React 應(yīng)用程序連接到數(shù)據(jù)存儲(chǔ)。
  • 這些問題都是我們需要注意的，但是Next.js的出現(xiàn)，完美地解決了這些問題，用一個(gè)框架即可統(tǒng)統(tǒng)拿下。
  • Next.js框架具有正確的抽象級(jí)別和出色的“開發(fā)人員體驗(yàn)”，包括靜態(tài)及服務(wù)器端融合渲染、 支持 TypeScript、智能化打包、 路由預(yù)取等功能，無需任何配置，開箱即用，這些內(nèi)容讓開發(fā)團(tuán)隊(duì)在編寫代碼時(shí)有“下雨天配巧克力”一般絲滑的體驗(yàn)。

認(rèn)識(shí) Next.js

Next.js是一款React 開發(fā)框架，它可以幫助我們構(gòu)建 React 應(yīng)用程序。作為一個(gè)輕量級(jí)React服務(wù)端渲染應(yīng)用框架，它有許多內(nèi)置功能，包括不僅限于：

  • 直觀的、 基于頁(yè)面的路由系統(tǒng)（并支持動(dòng)態(tài)路由）
  • 預(yù)渲染——支持在頁(yè)面級(jí)的 靜態(tài)生成 (SSG) 和 服務(wù)器端渲染 (SSR)
  • 自動(dòng)代碼拆分，提升頁(yè)面加載速度
  • 具有經(jīng)過優(yōu)化的預(yù)取功能的客戶端路由
  • 內(nèi)置 CSS 和 Sass 的支持，并支持任何 CSS-in-JS 庫(kù)
  • 開發(fā)環(huán)境支持快速刷新
  • 利用 Serverless Functions 及 API 路由 構(gòu)建 API 功能
  • 完全可擴(kuò)展

當(dāng)前，Next.js 正在被用于數(shù)以萬計(jì)的的網(wǎng)站和 Web 應(yīng)用程序，包括許多享譽(yù)世界的知名公司和頭部品牌?？梢哉f，它肉眼可見的易用性牢牢把握了用戶的心，不論是對(duì)于企業(yè)用戶還是小微開發(fā)者，從基礎(chǔ)框架到發(fā)布運(yùn)維，它都提供了相對(duì)應(yīng)的解決方案。

接下來，我們將帶大家基于Next.js實(shí)現(xiàn)類Excel控件的在線表格編輯的功能。

實(shí)戰(zhàn)之旅

首先需要安裝Node.js，并且Node.js版本需要高于10.13，
安裝流程可以參考：https://nodejs.org/en/
安裝完成后，就可以創(chuàng)建Next.js應(yīng)用。
打開終端窗口，進(jìn)入到創(chuàng)建應(yīng)用的程序目錄，然后執(zhí)行以下命令：

# 其背后的工作是通過調(diào)用create-next-app工具完成的，該工具會(huì)創(chuàng)建一個(gè)Next.js應(yīng)用程序。
npx create-next-app nextjs-spreadjs

安裝完成后執(zhí)行npm run dev，如果項(xiàng)目能正常啟動(dòng)，就表示工程已經(jīng)正常創(chuàng)建，默認(rèn)創(chuàng)建好的工程會(huì)啟動(dòng)在3000端口，展示如下：

然后可以將項(xiàng)目pages下的index.js中一些不必要的內(nèi)容元素刪除，在項(xiàng)目更路徑下面加載我們接下來寫好的類Excel表格控件.

最終展示效果如圖：

其中紅色區(qū)域?yàn)楸砀裰黧w，上方的工具欄是在線表格編輯器。在實(shí)際項(xiàng)目中，我們可以單獨(dú)引入組件運(yùn)行時(shí)，也可以將在線表格編輯區(qū)全部引入（在線表格編輯器會(huì)包含一個(gè)與之關(guān)聯(lián)的運(yùn)行時(shí)）。
首先，我們需要在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"

接下來，我們?cè)陧?xiàng)目根目錄下新建components文件夾，并創(chuàng)建OnlineDesigner.js文件，在該文件中，我們引入spreadjs相關(guān)資源，并引入組件運(yùn)行時(shí)。詳細(xì)代碼如下所示：

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)
        //獲取活動(dòng)工作表
        let sheet = entity.getActiveSheet()
        //設(shè)置數(shù)據(jù)
        sheet.setValue(0,0,'Grapecity')
    }
    return(
        <>
            <SpreadSheets
                hostStyle={{height:'98vh'}}
                workbookInitialized={initSpread}
            ></SpreadSheets>
        </>
       
    )
}

創(chuàng)建完成之后，我們需要在pages目錄下的index.js中引入定義好的組件。這里要注意的時(shí)，在引入組件時(shí)不要去使用服務(wù)端渲染（SSR），否會(huì)出現(xiàn)document undefined的錯(cuò)誤，這種錯(cuò)誤，一般和nodejs無法操作dom對(duì)象有關(guān)，具體的引入方法為：

const OnlineSpread = dynamic(() => import('../components/OnlineSpread.js'),{
  ssr: false
})
引入完成之后，我們就可以在當(dāng)前頁(yè)面中使用了，精簡(jiǎn)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>
     
  )
}

執(zhí)行npm run dev，顯示效果如下：

接下來。我們需要繼續(xù)在components文件夾下新建一個(gè)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>
     
  )
}

執(zhí)行npm run dev，顯示效果如下：

到這里我們就順利完成了基于Next.js實(shí)現(xiàn)在線表格編輯功能。
本文內(nèi)實(shí)例獲取地址：https://gitee.com/GrapeCity/nextjs-spreadjs

大家如果對(duì)更多應(yīng)用實(shí)例感興趣，可以查看：
https://demo.grapecity.com.cn/spreadjs/gc-sjs-samples/index.html

到此這篇關(guān)于基于 Next.js實(shí)現(xiàn)在線Excel的文章就介紹到這了,更多相關(guān)Next.js在線Excel內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • Auto.js自動(dòng)收取自己和好友螞蟻森林能量腳本

    Auto.js自動(dòng)收取自己和好友螞蟻森林能量腳本

    這篇文章主要為大家詳細(xì)介紹了Auto.js自動(dòng)收取自己和好友螞蟻森林能量腳本，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2018-06-06
  • JS動(dòng)態(tài)插入腳本和插入引用外部鏈接腳本的方法

    JS動(dòng)態(tài)插入腳本和插入引用外部鏈接腳本的方法

    js 動(dòng)態(tài)插入腳本的是在頁(yè)面加載時(shí)不存在，但將來的某一時(shí)刻通過修改該 DOM 動(dòng)態(tài)添加的腳本。接下來通過本文給大家介紹JS動(dòng)態(tài)插入腳本和插入引用外部鏈接腳本,需要的朋友可以參考下
    2018-05-05
  • JavaScript?ESLint插件保姆級(jí)使用教程

    JavaScript?ESLint插件保姆級(jí)使用教程

    ESLint最初是由Nicholas C. Zakas 于2013年6月創(chuàng)建的開源項(xiàng)目。它的目標(biāo)是提供一個(gè)插件化的javascript代碼檢測(cè)工具
    2022-08-08
  • js案例之鼠標(biāo)跟隨jquery版(實(shí)例講解)

    js案例之鼠標(biāo)跟隨jquery版(實(shí)例講解)

    下面小編就為大家?guī)硪黄猨s案例之鼠標(biāo)跟隨jquery版(實(shí)例講解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-07-07
  • 一種JavaScript的設(shè)計(jì)模式

    一種JavaScript的設(shè)計(jì)模式

    一種JavaScript的設(shè)計(jì)模式...
    2006-11-11
  • JS獲取地址欄參數(shù)的小例子

    JS獲取地址欄參數(shù)的小例子

    這篇文章介紹了JS獲取地址欄參數(shù)的小例子，有需要的朋友可以參考一下
    2013-08-08
  • JS轉(zhuǎn)換金額大寫方法詳細(xì)例子

    JS轉(zhuǎn)換金額大寫方法詳細(xì)例子

    在處理財(cái)務(wù)賬款類需求時(shí)需要將轉(zhuǎn)賬金額寫成大寫的,下面這篇文章主要給大家介紹了關(guān)于JS轉(zhuǎn)換金額大寫方法的相關(guān)資料,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下
    2023-10-10

    • 最新評(píng)論