Importer Web SDK via un CDN

Si vous n’utilisez pas de gestionnaire de paquets, vous pouvez également importer Univer à l’aide de balises <script>.

Convention de nommage des espaces de noms

La version globale d’Univer (UMD) expose un espace de noms sur l’objet global, selon la convention de nommage suivante :

text
@univerjs/core -> UniverCore@univerjs/docs-ui -> UniverDocsUi@univerjs-pro/docs-print -> UniverProDocsPrint@univerjs/docs-ui/locale/en-US -> UniverDocsUiEnUS@univerjs/core/facade -> UniverCoreFacade

Mode plugin

Utiliser la version globale

Univer fournit des versions UMD pour ses plugins. Lorsque vous utilisez des balises de script CDN, vous devez inclure manuellement les versions UMD de chaque plugin ainsi que leurs dépendances. Ce processus étant fastidieux, nous vous recommandons de ne l’utiliser qu’après avoir bien compris le fonctionnement des plugins, notamment leurs dépendances et l’ordre des fichiers de styles.

Exemple

HTML
<head>  <script src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>  <script>    /**     * Starting from Univer 0.6.0, with the support for React 19[^1], UMD users may need additional adaptation.     * It is recommended to migrate to module script[^2] and a more modern build system.     *     * [^1]: [support for React 19] https://github.com/dream-num/univer/pull/4247     * [^2]: [Module Script] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#applying_the_module_to_your_html     */    /**     * Fix `Uncaught TypeError: client.createRoot is not a function`     * If using UMD React < 18, you might need the following code.     */    ;(function (global) {      'use strict'      if (!global.ReactDOM) {        throw new Error('ReactDOM must be loaded before ReactCreateRoot.')      }      const ReactDOM = global.ReactDOM      if (!ReactDOM.createRoot) {        ReactDOM.createRoot = function (container) {          return {            render: (element) => {              ReactDOM.render(element, container)            },          }        }      }    })(this)    /**     * Fix `Uncaught TypeError: jsxRuntime.jsx is not a function`     * If using UMD React, you might need the following code.     * Reference: https://unpkg.com/react@18.3.1/cjs/react-jsx-runtime.production.min.js     */    ;(function (global) {      'use strict'      if (!global.React) {        throw new Error('React must be loaded before ReactJSXRuntime.')      }      const React = global.React      if (!React.jsx || !React.jsxs) {        const REACT_ELEMENT_TYPE = Symbol.for('react.element')        const hasOwnProperty = Object.prototype.hasOwnProperty        const RESERVED_PROPS = {          key: true,          ref: true,          __self: true,          __source: true,        }        const ReactCurrentOwner = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner        function createReactElement(type, config, maybeKey) {          const props = {}          let key = null          let ref = null          if (maybeKey !== undefined) {            key = `${maybeKey}`          }          if (config.key !== undefined) {            key = `${config.key}`          }          if (config.ref !== undefined) {            ref = config.ref          }          for (var propName in config) {            if (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {              props[propName] = config[propName]            }          }          if (type && type.defaultProps) {            const defaultProps = type.defaultProps            for (var propName in defaultProps) {              if (props[propName] === undefined) {                props[propName] = defaultProps[propName]              }            }          }          return {            $$typeof: REACT_ELEMENT_TYPE,            type,            key,            ref,            props,            _owner: ReactCurrentOwner.current,          }        }        React.jsx = createReactElement        React.jsxs = createReactElement      }    })(this)  </script>  <script src="https://unpkg.com/rxjs@7.8.1/dist/bundles/rxjs.umd.min.js"></script>  <script src="https://unpkg.com/echarts@5.6.0/dist/echarts.min.js"></script>  <script src="https://unpkg.com/@wendellhu/redi@1.1.2/dist/umd/index.js"></script>  <script src="https://unpkg.com/@wendellhu/redi@1.1.2/dist/umd/react-bindings/index.js"></script>  <script src="https://unpkg.com/@univerjs/themes/lib/umd/index.js"></script>  <script src="https://unpkg.com/@univerjs/protocol/lib/umd/index.js"></script>  <script src="https://unpkg.com/@univerjs/core/lib/umd/index.js"></script>  <script src="https://unpkg.com/@univerjs/network/lib/umd/index.js"></script>  <script src="https://unpkg.com/@univerjs/rpc/lib/umd/index.js"></script>  <script src="https://unpkg.com/@univerjs/design/lib/umd/index.js"></script>  <script src="https://unpkg.com/@univerjs/engine-render/lib/umd/index.js"></script>  <script src="https://unpkg.com/@univerjs/engine-formula/lib/umd/index.js"></script>  <script src="https://unpkg.com/@univerjs/drawing/lib/umd/index.js"></script>  <script src="https://unpkg.com/@univerjs/ui/lib/umd/index.js"></script>  <script src="https://unpkg.com/@univerjs/docs/lib/umd/index.js"></script>  <script src="https://unpkg.com/@univerjs/docs-ui/lib/umd/index.js"></script>  <script src="https://unpkg.com/@univerjs/sheets/lib/umd/index.js"></script>  <script src="https://unpkg.com/@univerjs/sheets-ui/lib/umd/index.js"></script>  <script src="https://unpkg.com/@univerjs/sheets-formula/lib/umd/index.js"></script>  <script src="https://unpkg.com/@univerjs/sheets-formula-ui/lib/umd/index.js"></script>  <script src="https://unpkg.com/@univerjs/sheets-numfmt/lib/umd/index.js"></script>  <script src="https://unpkg.com/@univerjs/sheets-numfmt-ui/lib/umd/index.js"></script>  <script src="https://unpkg.com/@univerjs/core/lib/umd/facade.js"></script>  <script src="https://unpkg.com/@univerjs/engine-formula/lib/umd/facade.js"></script>  <script src="https://unpkg.com/@univerjs/ui/lib/umd/facade.js"></script>  <script src="https://unpkg.com/@univerjs/docs-ui/lib/umd/facade.js"></script>  <script src="https://unpkg.com/@univerjs/sheets/lib/umd/facade.js"></script>  <script src="https://unpkg.com/@univerjs/sheets-ui/lib/umd/facade.js"></script>  <script src="https://unpkg.com/@univerjs/sheets-formula/lib/umd/facade.js"></script>  <script src="https://unpkg.com/@univerjs/sheets-numfmt/lib/umd/facade.js"></script>  <script src="https://unpkg.com/@univerjs/design/lib/umd/locale/en-US.js"></script>  <script src="https://unpkg.com/@univerjs/ui/lib/umd/locale/en-US.js"></script>  <script src="https://unpkg.com/@univerjs/sheets/lib/umd/locale/en-US.js"></script>  <script src="https://unpkg.com/@univerjs/sheets-ui/lib/umd/locale/en-US.js"></script>  <script src="https://unpkg.com/@univerjs/docs-ui/lib/umd/locale/en-US.js"></script>  <script src="https://unpkg.com/@univerjs/sheets-formula-ui/lib/umd/locale/en-US.js"></script>  <script src="https://unpkg.com/@univerjs/sheets-numfmt-ui/lib/umd/locale/en-US.js"></script>  <link rel="stylesheet" href="https://unpkg.com/@univerjs/design/lib/index.css" />  <link rel="stylesheet" href="https://unpkg.com/@univerjs/ui/lib/index.css" />  <link rel="stylesheet" href="https://unpkg.com/@univerjs/docs-ui/lib/index.css" />  <link rel="stylesheet" href="https://unpkg.com/@univerjs/sheets-ui/lib/index.css" />  <link rel="stylesheet" href="https://unpkg.com/@univerjs/sheets-formula-ui/lib/index.css" />  <link rel="stylesheet" href="https://unpkg.com/@univerjs/sheets-numfmt-ui/lib/index.css" />  <style>    html,    body,    #root,    #app {      padding: 0;      margin: 0;      height: 100%;    }  </style></head><body>  <div id="app"></div>  <script>    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.EN_US,      locales: {        [LocaleType.EN_US]: mergeLocales(          UniverDesignEnUS,          UniverUiEnUS,          UniverSheetsEnUS,          UniverSheetsUiEnUS,          UniverDocsUiEnUS,          UniverSheetsFormulaUiEnUS,          UniverSheetsNumfmtUiEnUS,        ),      },    })    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)  </script></body>

Spécifier les versions

unpkg et jsDelivr permettent tous deux d’indiquer une version précise de la ressource. Par exemple, pour utiliser la version x.y.z d’Univer, ajoutez simplement @<version> à l’URL :

DIFF
- https://unpkg.com/@univerjs/core/lib/umd/index.js+ https://unpkg.com/@univerjs/core@x.y.z/lib/umd/index.js

Que pensez-vous de ce guide ?

© 2026 DreamNum Co., Ltd.