基於Vite+React構建線上Excel

葡萄城技術團隊 發表於 2022-06-23
React Excel

Vite是隨著Vue3一起釋出的一款新型前端構建工具,能夠顯著的提升前端開發體驗,它主要由兩部分組成:

(1)一個開發伺服器,它基於*原生ES模組提供了豐富的內建功能,如速度快到驚人的 模組熱更新(*HMR)。

(2)一套構建指令,它使用 Rollup 打包你的程式碼,並且它是預配置的,可輸出用於生產環境的高度優化過的靜態資源。

Vite意在提供開箱即用的配置,同時它的 外掛APIJavaScript API帶來了高度的可擴充套件性,並有完整的型別支援。

Vite最初發行時,僅能用來構建Vue3專案,但隨著隨用群體的不斷擴大,目前能支援構建的專案越來越多,已經包含了以下幾種專案模板:

JavaScriptTypeScript
vanillavanilla-ts
vuevue-ts
reactreact-ts
preactpreact-ts
litlit-ts
sveltesvelte-ts

我們可以看到,目前已經支援了react以及react-ts模板。對於一個經常性使用React開發專案的程式媛來說,之前一直使用的時create-react-app來構建react應用,也沒有覺得有太大的問題。最開始要使用到Vite時,本葡萄的內心還是有點疑慮的,因為畢竟Vite是跟著Vue3釋出的,對於使用者而言,潛意識會覺得它和Vue更加適配;但在實際上手用了之後,才會發現Vite的搭建速度,不虧於它的名字。

接下來我們就是一起動手用Vite來建立一個基於React的線上Excel專案吧。

專案實戰

相容性提示:Vite 需要 Node.js 版本 >= 12.0.0。然而,有些模板需要依賴更高的Node 版本才能正常執行,當你的包管理器發出警告時,請注意升級你的Node 版本。

我們可以通過以下命令,快速的建立一個react-ts的專案,如果當前專案並不想使用ts的話,只需要將--template後的預製模板改為react即可。

# npm 6.x  vite-react-ts表示專案名,可以自己隨便改一個
npm create [email protected] vite-react-ts --template react-ts

# npm 7+, extra double-dash is needed:
npm create [email protected] vite-react-ts -- --template react-ts

# yarn
yarn create vite vite-react-ts--template react-ts

# pnpm
pnpm create vite vite-react-ts-- --template react-ts

檢視 create-vite 可以獲取其它模板的更多細節:vanilla,vanilla-ts,vue,vue-ts,react,react-ts,preact,preact-ts,lit,lit-ts,svelte,svelte-ts。

基於Vite+React構建線上Excel

建立一個react-ts專案僅需7.813秒,這速度已經讓很多專案望塵莫及了。接下來我們既可以按照終端中的提示,先進入到專案目錄下,之後執行npm install,安裝完成後npm run dev就可以啟動了。這個階段如果有任何安裝問題,可以面向搜尋引擎解決,一般來說,需要指定一個其它的安裝映象。

基於Vite+React構建線上Excel

專案預設啟動在3000埠。開啟後展示如上圖所示,到這一步我們使用Vite就已經建立好React專案了,接下來我們需要引入純前端表格控制元件,用來構建一個線上Excel。要想使用,就必須先引入元件相關資源,我們可以在package.json中新增以下內容:


"dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "@grapecity/spread-sheets": "15.0.7",
    "@grapecity/spread-sheets-react": "15.0.7",
    "@grapecity/spread-excelio": "15.0.7",
    "@grapecity/spread-sheets-charts": "15.0.7",
    "@grapecity/spread-sheets-print": "15.0.7",
    "@grapecity/spread-sheets-pdf": "15.0.7",
    "@grapecity/spread-sheets-barcode": "15.0.7",
    "@grapecity/spread-sheets-shapes": "15.0.7",
    "@grapecity/spread-sheets-resources-ko": "15.0.7",
    "@grapecity/spread-sheets-resources-ja": "15.0.7",
    "@grapecity/spread-sheets-resources-zh": "15.0.7",
    "@grapecity/spread-sheets-languagepackages": "15.0.7",
    "@grapecity/spread-sheets-pivot-addon": "15.0.7",
    "@grapecity/spread-sheets-designer": "15.0.7",
    "@grapecity/spread-sheets-designer-resources-cn": "15.0.7",
    "@grapecity/spread-sheets-designer-react": "15.0.7",
    "@grapecity/spread-sheets-tablesheet": "15.0.7"
  },

新增完成後,再次進入到當前專案目錄下,執行npm install,完成新新增資源的安裝。當然,大家在引入時,可以現在npm上查詢一下SpreadJS目前最新的版本,去引入最新版本的產品。

引入完成後,將專案中不需要使用的東西刪一刪,讓頁面看起來乾淨一點。之後在src下新建components資料夾,用來存放之後我們寫的表格元件。components資料夾下新建OnlineDesigner.tsx檔案。接下來我們就需要在OnlineDesigner.tsx檔案中去引入SpreadJS相關資源,編寫表格元件,詳細程式碼如下:

import { Component, PropsWithChildren, ReactNode } 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 * as GCDesigner from '@grapecity/spread-sheets-designer';
import "@grapecity/spread-sheets-resources-zh"
import GC from "@grapecity/spread-sheets"
import { Designer } from '@grapecity/spread-sheets-designer-react';
GC.Spread.Common.CultureManager.culture('zh-cn')


interface Props{}
interface State{}
   


export default class OnlineDesigner extends Component<Props, State>{
  designer: null | GCDesigner.Spread.Sheets.Designer.Designer;
  constructor(props: Props){
    super(props)
    this.designer = null
  }


  designerInitialized = (designer: GCDesigner.Spread.Sheets.Designer.Designer) => {
    this.designer = designer
    console.log(designer)
    // 獲取與designer相關聯的工作簿(Spread)
    let spread:GC.Spread.Sheets.Workbook = this.designer.getWorkbook() as GC.Spread.Sheets.Workbook
    // 獲取當前活動工作表
    let sheet:GC.Spread.Sheets.Worksheet = spread.getActiveSheet() as GC.Spread.Sheets.Worksheet
    //設定數值
    sheet.setValue(0,0,'Hello Grapecity')
    //設定行高
    sheet.setColumnWidth(0,120)
    //設定區域內容
    sheet.setArray(1,0,[[2,3,5]])
    //設定公式
    sheet.setFormula(3,0,'=sum(A2:C2)')


  }


  render(): ReactNode {
      return(
          <Designer
            spreadOptions={{sheetCount: 3}}
            styleInfo={{height: '98vh'}}
            designerInitialized = {this.designerInitialized}
          />
      )
  }
}

接下來,我們需要在app.tsx中引入自己定義的OnlineDesigner元件即可,詳細程式碼為:

import './App.css'
import OnlineDesigner from './components/OnlineDesigner'


function App() {


  return (
    <div className="App">
      <OnlineDesigner/>
    </div>
  )
}


export default App

最後,我們來看看顯示效果吧

基於Vite+React構建線上Excel

通過以上幾步操作,你就可以擁有一個線上的Excel系統辣~

文內demo下載地址:https://gcdn.grapecity.com.cn/forum.php?mod=attachment&aid=MjE3NDQzfDIwNTI5YzgwfDE2NTU5NjI3OTR8NjI2NzZ8OTk3MTg%3D

瞭解更多例項:https://demo.grapecity.com.cn...