透過 CDN 使用 Web SDK

先執行完整範例，再複製到自己的頁面。範例已包含可編輯試算表與公式計算所需的相依套件、樣式、語言包和 Facade 註冊。

先體驗可編輯的試算表

  1. 開啟範例，或下載下方 HTML，儲存為 index.html。
  2. 使用可連網的現代瀏覽器開啟，不需要建置工具或伺服器。範例介面和試算表內容均為繁體中文。
  3. 筆記本的合計為 36。將數量由 3 改成 4，合計會更新為 48；也可編輯其他儲存格並復原修改。
下載 HTML

完整 HTML 範例

本例使用 React 18.3.1 UMD。其全域 React 物件未直接提供 Univer UMD 套件所需的 jsx 與 jsxs，下方兩行橋接透過公開的 React.createElement API 補齊這些入口。使用套件管理器整合時，建置工具會解析 react/jsx-runtime，不必複製這段 UMD 橋接。

範例依相依順序從 jsDelivr 載入資源；請求失敗時，先從 unpkg 重試相同版本，再繼續載入。兩個來源都失敗時會停止啟動，並在頁面顯示無法載入的資源。

HTML
<!doctype html><html lang="zh-TW">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Univer Sheets CDN 範例</title>    <style>      html,      body,      #root,      #app {        padding: 0;        margin: 0;        height: 100%;      }    </style>  </head>  <body>    <div id="app"><p role="status" style="padding: 24px; font-family: system-ui">正在載入 Univer…</p></div>    <script>      const cdnBases = ['https://cdn.jsdelivr.net/npm/', 'https://unpkg.com/']      const app = document.getElementById('app')      async function loadResource(path, tag = 'script') {        for (const base of cdnBases) {          const element = document.createElement(tag)          const url = base + path          element.crossOrigin = 'anonymous'          if (tag === 'link') {            element.rel = 'stylesheet'            element.href = url          } else {            element.src = url          }          try {            await new Promise((resolve, reject) => {              element.onload = () => resolve()              element.onerror = () => reject(new Error(url))              document.head.appendChild(element)            })            return          } catch {            element.remove()          }        }        throw new Error(`Could not load ${path} from ${cdnBases.join(' or ')}`)      }      const styles = [        '@univerjs/design@1.4.0/lib/index.css',        '@univerjs/ui@1.4.0/lib/index.css',        '@univerjs/docs-ui@1.4.0/lib/index.css',        '@univerjs/sheets-ui@1.4.0/lib/index.css',        '@univerjs/sheets-formula-ui@1.4.0/lib/index.css',        '@univerjs/sheets-numfmt-ui@1.4.0/lib/index.css',      ]      const reactScripts = [        'react@18.3.1/umd/react.production.min.js',        'react-dom@18.3.1/umd/react-dom.production.min.js',      ]      const sdkScripts = [        'rxjs@7.8.2/dist/bundles/rxjs.umd.min.js',        '@wendellhu/redi@1.1.3/dist/umd/index.js',        '@wendellhu/redi@1.1.3/dist/umd/react-bindings/index.js',        '@univerjs/themes@1.4.0/lib/umd/index.js',        '@univerjs/protocol@1.4.0/lib/umd/index.js',        '@univerjs/core@1.4.0/lib/umd/index.js',        '@univerjs/network@1.4.0/lib/umd/index.js',        '@univerjs/rpc@1.4.0/lib/umd/index.js',        '@univerjs/design@1.4.0/lib/umd/index.js',        '@univerjs/engine-render@1.4.0/lib/umd/index.js',        '@univerjs/engine-formula@1.4.0/lib/umd/index.js',        '@univerjs/drawing@1.4.0/lib/umd/index.js',        '@univerjs/telemetry@1.4.0/lib/umd/index.js',        '@univerjs/ui@1.4.0/lib/umd/index.js',        '@univerjs/docs@1.4.0/lib/umd/index.js',        '@univerjs/docs-ui@1.4.0/lib/umd/index.js',        '@univerjs/sheets@1.4.0/lib/umd/index.js',        '@univerjs/sheets-ui@1.4.0/lib/umd/index.js',        '@univerjs/sheets-formula@1.4.0/lib/umd/index.js',        '@univerjs/sheets-formula-ui@1.4.0/lib/umd/index.js',        '@univerjs/sheets-numfmt@1.4.0/lib/umd/index.js',        '@univerjs/sheets-numfmt-ui@1.4.0/lib/umd/index.js',        '@univerjs/core@1.4.0/lib/umd/facade.js',        '@univerjs/engine-formula@1.4.0/lib/umd/facade.js',        '@univerjs/ui@1.4.0/lib/umd/facade.js',        '@univerjs/docs@1.4.0/lib/umd/facade.js',        '@univerjs/docs-ui@1.4.0/lib/umd/facade.js',        '@univerjs/sheets@1.4.0/lib/umd/facade.js',        '@univerjs/sheets-ui@1.4.0/lib/umd/facade.js',        '@univerjs/sheets-formula@1.4.0/lib/umd/facade.js',        '@univerjs/sheets-numfmt@1.4.0/lib/umd/facade.js',        '@univerjs/design@1.4.0/lib/umd/locale/zh-TW.js',        '@univerjs/ui@1.4.0/lib/umd/locale/zh-TW.js',        '@univerjs/sheets@1.4.0/lib/umd/locale/zh-TW.js',        '@univerjs/sheets-ui@1.4.0/lib/umd/locale/zh-TW.js',        '@univerjs/docs-ui@1.4.0/lib/umd/locale/zh-TW.js',        '@univerjs/sheets-formula-ui@1.4.0/lib/umd/locale/zh-TW.js',        '@univerjs/sheets-numfmt-ui@1.4.0/lib/umd/locale/zh-TW.js',      ]      // Fetch ahead in parallel; main() still executes scripts in dependency order.      for (const [as, paths] of [        ['style', styles],        ['script', [...reactScripts, ...sdkScripts]],      ]) {        for (const path of paths) {          const preload = document.createElement('link')          preload.rel = 'preload'          preload.as = as          preload.crossOrigin = 'anonymous'          preload.href = cdnBases[0] + path          preload.onerror = () => {            preload.onerror = null            preload.href = cdnBases[1] + path          }          document.head.appendChild(preload)        }      }      async function main() {        for (const path of styles) await loadResource(path, 'link')        for (const path of reactScripts) await loadResource(path)        // Bridge the React 18 UMD global to the JSX runtime expected by Univer UMD bundles.        React.jsx = (type, props, key) => React.createElement(type, key === undefined ? props : { ...props, key })        React.jsxs = React.jsx        for (const path of sdkScripts) await loadResource(path)        app.textContent = ''        const { Univer, LocaleType, mergeLocales, UniverInstanceType } = UniverCore        const { FUniver } = UniverCoreFacade        const { UniverRenderEnginePlugin } = UniverEngineRender        const { UniverFormulaEnginePlugin } = UniverEngineFormula        const { UniverUIPlugin } = UniverUi        const { UniverSheetsPlugin } = UniverSheets        const { UniverSheetsUIPlugin } = UniverSheetsUi        const { UniverDocsPlugin } = UniverDocs        const { UniverDocsUIPlugin } = UniverDocsUi        const { UniverSheetsFormulaPlugin } = UniverSheetsFormula        const { UniverSheetsFormulaUIPlugin } = UniverSheetsFormulaUi        const { UniverSheetsNumfmtPlugin } = UniverSheetsNumfmt        const { UniverSheetsNumfmtUIPlugin } = UniverSheetsNumfmtUi        const univer = new Univer({          locale: LocaleType.ZH_TW,          locales: {            [LocaleType.ZH_TW]: mergeLocales(              UniverDesignZhTW,              UniverUiZhTW,              UniverSheetsZhTW,              UniverSheetsUiZhTW,              UniverDocsUiZhTW,              UniverSheetsFormulaUiZhTW,              UniverSheetsNumfmtUiZhTW,            ),          },        })        univer.registerPlugin(UniverRenderEnginePlugin)        univer.registerPlugin(UniverFormulaEnginePlugin)        univer.registerPlugin(UniverUIPlugin, {          container: 'app',        })        univer.registerPlugin(UniverDocsPlugin)        univer.registerPlugin(UniverDocsUIPlugin)        univer.registerPlugin(UniverSheetsPlugin)        univer.registerPlugin(UniverSheetsUIPlugin)        univer.registerPlugin(UniverSheetsFormulaPlugin)        univer.registerPlugin(UniverSheetsFormulaUIPlugin)        univer.registerPlugin(UniverSheetsNumfmtPlugin)        univer.registerPlugin(UniverSheetsNumfmtUIPlugin)        univer.createUnit(UniverInstanceType.UNIVER_SHEET, {})        const univerAPI = FUniver.newAPI(univer)        window.univerAPI = univerAPI        univerAPI          .getActiveWorkbook()          .getActiveSheet()          .getRange('A1:D3')          .setValues([            ['品項', '數量', '單價', '合計'],            ['筆記本', 3, 12, '=B2*C2'],            ['原子筆', 5, 2, '=B3*C3'],          ])      }      main().catch((error) => {        console.error(error)        app.setAttribute('role', 'alert')        app.style.cssText =          'padding: 24px; box-sizing: border-box; white-space: pre-wrap; overflow-wrap: anywhere; font: 14px/1.5 system-ui'        app.textContent = '範例載入失敗，請檢查網路後重新整理頁面。' + '\n' + error.message      })    </script>  </body></html>

命名空間規範

UMD 腳本會將模組匯出放在全域物件上。初始化程式碼透過這些名稱存取外掛和 Facade API：

套件或入口全域名稱
@univerjs/coreUniverCore
@univerjs/docs-uiUniverDocsUi
@univerjs/core/facadeUniverCoreFacade
@univerjs/docs-ui/locale/zh-TWUniverDocsUiZhTW

保持版本一致

範例統一使用 Univer 1.4.0、React 與 ReactDOM 18.3.1、RxJS 7.8.2。升級時一併更新所有 Univer URL，包括 Facade、CSS 和語言檔案。整合現有應用時，避免與建置產物重複載入這些相依套件。

疑難排解

現象檢查方式
ITelemetryService在相依於它的 @univerjs/sheets-ui 之前載入 @univerjs/telemetry，並保留完整相依清單。
FDocument先載入 @univerjs/docs/facade，再載入 @univerjs/docs-ui/facade；Sheets 也使用 Docs 文字引擎。
[redi], t is not a function先從完整範例開始，每個相依套件只載入一份並保持版本一致；在瀏覽器 Network 面板檢查失敗的請求。
編輯器空白為容器設定明確高度。若網路或 CSP 封鎖 CDN，請改用本機託管的相依套件或套件管理器整合。

現有 React 或 Vue 應用建議使用套件管理器整合，由建置工具管理相依套件，不必維護長腳本清單。

你覺得這篇文檔如何？

© 2026 DreamNum Co., Ltd.