通过 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-CN">  <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-CN.js',        '@univerjs/ui@1.4.0/lib/umd/locale/zh-CN.js',        '@univerjs/sheets@1.4.0/lib/umd/locale/zh-CN.js',        '@univerjs/sheets-ui@1.4.0/lib/umd/locale/zh-CN.js',        '@univerjs/docs-ui@1.4.0/lib/umd/locale/zh-CN.js',        '@univerjs/sheets-formula-ui@1.4.0/lib/umd/locale/zh-CN.js',        '@univerjs/sheets-numfmt-ui@1.4.0/lib/umd/locale/zh-CN.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_CN,          locales: {            [LocaleType.ZH_CN]: mergeLocales(              UniverDesignZhCN,              UniverUiZhCN,              UniverSheetsZhCN,              UniverSheetsUiZhCN,              UniverDocsUiZhCN,              UniverSheetsFormulaUiZhCN,              UniverSheetsNumfmtUiZhCN,            ),          },        })        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-CNUniverDocsUiZhCN

保持版本一致

示例统一使用 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.