dream-num · wubocao · Jul 8, 2025 · Jul 11, 2025
diff --git a/examples/esbuild.config.ts b/examples/esbuild.config.ts
@@ -139,6 +139,9 @@ const entryPoints = [
     // mobile sheet
     './src/mobile-s/main.ts',
     './src/mobile-s/worker.ts',
+
+    // sheets-embed-in-page
+    './src/sheets-embed-in-page/main.ts',
 ];
 
 const config: SameShape<BuildOptions, BuildOptions> = {

diff --git a/examples/scripts/generate-html.ts b/examples/scripts/generate-html.ts
@@ -60,6 +60,38 @@ const indexTemplate = `<!doctype html>
 </html>
 `;
 
+const sheetsEmbedInPageTemplate = `
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta content="width=device-width, initial-scale=1" name="viewport" />
+        <title>Univer</title>
+
+        <link rel="icon" type="image/x-icon" href="../favicon.svg" />
+        <link rel="stylesheet" href="./main.css" />
+        <style>
+            html,
+            body {
+                height: 100%;
+                margin: 0;
+                font-family: Arial;
+            }
+        </style>${ESBUILD_SCRIPT}
+    </head>
+    <body>
+        <section style="margin: 100px 0;">
+            <div style="height: 600px; width: 1000px; margin: 0 auto; overflow: auto; background-color: #f0f0f0;">
+                <div style="width: 2000px; margin: 400px auto;">
+                    <div id="app" style="height: 400px; width: 800px; border: 1px solid #000; margin: 0 auto;"></div>
+                </div>
+            </div>
+        </section>
+        <script type="module" src="./main.js"></script>
+    </body>
+</html>
+`;
+
 /**
  * Generate html files
  */
@@ -70,7 +102,11 @@ async function generateHtml() {
         if (fs.statSync(__example).isDirectory()) {
             const __target = path.resolve(__dirname, `../public/${dir}`);
             fs.ensureDirSync(__target);
-            fs.writeFileSync(path.resolve(__target, 'index.html'), indexTemplate);
+            if (dir === 'sheets-embed-in-page') {
+                fs.writeFileSync(path.resolve(__target, 'index.html'), sheetsEmbedInPageTemplate);
+            } else {
+                fs.writeFileSync(path.resolve(__target, 'index.html'), indexTemplate);
+            }
         }
     });
 }

diff --git a/examples/src/main.tsx b/examples/src/main.tsx
@@ -73,6 +73,9 @@ function Examples() {
     }, {
         title: '📱 Mobile',
         href: './mobile-s/',
+    }, {
+        title: '🗂️ Sheets Embed In Page',
+        href: './sheets-embed-in-page/',
     }];
 
     return (

diff --git a/examples/src/sheets-embed-in-page/main.ts b/examples/src/sheets-embed-in-page/main.ts
@@ -0,0 +1,159 @@
+/**
+ * Copyright 2023-present DreamNum Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { LocaleType, LogLevel, Univer, UniverInstanceType, UserManagerService } from '@univerjs/core';
+import { FUniver } from '@univerjs/core/facade';
+import { UniverDebuggerPlugin } from '@univerjs/debugger';
+import { UniverDocsPlugin } from '@univerjs/docs';
+import { UniverDocsUIPlugin } from '@univerjs/docs-ui';
+import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula';
+import { UniverRenderEnginePlugin } from '@univerjs/engine-render';
+import { DEFAULT_WORKBOOK_DATA_DEMO09 } from '@univerjs/mockdata';
+import zhCN from '@univerjs/mockdata/locales/zh-CN';
+import { UniverNetworkPlugin } from '@univerjs/network';
+import { UniverRPCMainThreadPlugin } from '@univerjs/rpc';
+import { UniverSheetsPlugin } from '@univerjs/sheets';
+import { UniverSheetsConditionalFormattingPlugin } from '@univerjs/sheets-conditional-formatting';
+import { UniverSheetsDataValidationPlugin } from '@univerjs/sheets-data-validation';
+import { UniverSheetsFilterPlugin } from '@univerjs/sheets-filter';
+import { UniverSheetsFormulaPlugin } from '@univerjs/sheets-formula';
+import { UniverSheetsHyperLinkPlugin } from '@univerjs/sheets-hyper-link';
+import { UniverSheetsNotePlugin } from '@univerjs/sheets-note';
+import { UniverSheetsNumfmtPlugin } from '@univerjs/sheets-numfmt';
+import { UniverSheetsSortPlugin } from '@univerjs/sheets-sort';
+import { UniverSheetsTablePlugin } from '@univerjs/sheets-table';
+import { UniverSheetsThreadCommentPlugin } from '@univerjs/sheets-thread-comment';
+import { UniverSheetsUIPlugin } from '@univerjs/sheets-ui';
+import { UniverSheetsZenEditorPlugin } from '@univerjs/sheets-zen-editor';
+import { UniverUIPlugin } from '@univerjs/ui';
+
+import '@univerjs/sheets/facade';
+import '@univerjs/ui/facade';
+import '@univerjs/docs-ui/facade';
+import '@univerjs/sheets-ui/facade';
+import '@univerjs/sheets-data-validation/facade';
+import '@univerjs/engine-formula/facade';
+import '@univerjs/sheets-filter/facade';
+import '@univerjs/sheets-formula/facade';
+import '@univerjs/sheets-numfmt/facade';
+import '@univerjs/sheets-hyper-link-ui/facade';
+import '@univerjs/sheets-thread-comment/facade';
+import '@univerjs/sheets-conditional-formatting/facade';
+import '@univerjs/sheets-find-replace/facade';
+import '@univerjs/sheets-drawing-ui/facade';
+import '@univerjs/sheets-zen-editor/facade';
+import '@univerjs/sheets-crosshair-highlight/facade';
+import '@univerjs/sheets-formula-ui/facade';
+import '@univerjs/sheets-table/facade';
+import '@univerjs/sheets-sort/facade';
+import '@univerjs/network/facade';
+import '@univerjs/sheets-note/facade';
+import '../global.css';
+
+/* eslint-disable-next-line node/prefer-global/process */
+const IS_E2E: boolean = !!process.env.IS_E2E;
+
+export const mockUser = {
+    userID: 'Owner_qxVnhPbQ',
+    name: 'Owner',
+    avatar: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAInSURBVHgBtZU9TxtBEIbfWRzFSIdkikhBSqRQkJqkCKTCFkqVInSUSaT0wC8w/gXxD4gU2nRJkXQWhAZowDUUWKIwEgWWbEEB3mVmx3dn4DA2nB/ppNuPeWd29mMIPXDr+RxwtgRHeW6+guNPRxogqnL7Dwz9psJ27S4NShaeZTH3kwXy6I81dlRKcmRui88swdq9AcSFL7Buz1Vmlns64MiLsCjzwnIYHLH57tbfFbs7KRaXyEU8FVZofqccOfA5l7Q8LPIkGrwnb2RPNEXWFVMUF3L+kDCk0btDDAMzOm5YfAHDwp4tG74wnzAsiOYMnJ3GoDybA7IT98/jm5+JNnfiIzAS6LlqHQBN/i6b2t/cV1Hh6BfwYlHnHP4AXi5q/8kmMMpOs8+BixZw/Fd6xUEHEbnkgclvQP2fGp7uShRKnQ3G32rkjV1th8JhIGG7tR/JyjGteSOZELwGMmNqIIigRCLRh2OZIE6BjItdd7pCW6Uhm1zzkUtungSxwEUzNpQ+GQumtH1ej1MqgmNT6vwmhCq5yuwq56EYTbgeQUz3yvrpV1b4ok3nYJ+eYhgYmjRUqErx2EDq0Fr8FhG++iqVGqxlUJI/70Ar0UgJaWHj6hYVHJrfKssAHot1JfqwE9WVWzXZVd5z2Ws/4PnmtEjkXeKJDvxUecLbWOXH/DP6QQ4J72NS0adedp1aseBfXP8odlZFfPvBF7SN/8hky1TYuPOAXAEipMx15u5ToAAAAABJRU5ErkJggg==',
+    anonymous: false,
+    canBindAnonymous: false,
+};
+
+function createNewInstance() {
+    // univer
+    const univer = new Univer({
+        // theme: greenTheme,
+        darkMode: localStorage.getItem('local.darkMode') === 'dark',
+        locale: LocaleType.ZH_CN,
+        locales: {
+            [LocaleType.ZH_CN]: zhCN,
+        },
+        logLevel: LogLevel.VERBOSE,
+    });
+
+    const worker = new Worker(new URL('./worker.js', import.meta.url), { type: 'module' });
+    univer.registerPlugin(UniverRPCMainThreadPlugin, { workerURL: worker });
+
+    univer.registerPlugin(UniverDocsPlugin);
+    univer.registerPlugin(UniverRenderEnginePlugin);
+    univer.registerPlugin(UniverUIPlugin, {
+        container: 'app',
+        // ribbonType: 'simple',
+    });
+    univer.registerPlugin(UniverDocsUIPlugin);
+
+    univer.registerPlugin(UniverSheetsPlugin, {
+        notExecuteFormula: true,
+        autoHeightForMergedCells: true,
+    });
+    univer.registerPlugin(UniverSheetsUIPlugin);
+    univer.registerPlugin(UniverSheetsNumfmtPlugin);
+    univer.registerPlugin(UniverSheetsZenEditorPlugin);
+    univer.registerPlugin(UniverFormulaEnginePlugin, { notExecuteFormula: true });
+    univer.registerPlugin(UniverSheetsFormulaPlugin, { notExecuteFormula: true });
+    univer.registerPlugin(UniverSheetsDataValidationPlugin);
+    univer.registerPlugin(UniverSheetsConditionalFormattingPlugin);
+    univer.registerPlugin(UniverSheetsFilterPlugin);
+    univer.registerPlugin(UniverSheetsSortPlugin);
+    univer.registerPlugin(UniverSheetsHyperLinkPlugin);
+    univer.registerPlugin(UniverSheetsThreadCommentPlugin);
+
+    univer.registerPlugin(UniverSheetsTablePlugin);
+    univer.registerPlugin(UniverNetworkPlugin);
+    univer.registerPlugin(UniverSheetsNotePlugin);
+
+    // If we are running in e2e platform, we should immediately register the debugger plugin.
+    if (IS_E2E) {
+        univer.registerPlugin(UniverDebuggerPlugin, {
+            fab: false,
+            performanceMonitor: {
+                enabled: false,
+            },
+        });
+    }
+
+    const injector = univer.__getInjector();
+    const userManagerService = injector.get(UserManagerService);
+    userManagerService.setCurrentUser(mockUser);
+
+    // create univer sheet instance
+    if (!IS_E2E) {
+        univer.createUnit(UniverInstanceType.UNIVER_SHEET, DEFAULT_WORKBOOK_DATA_DEMO09);
+    }
+
+    univer.onDispose(() => {
+        worker.terminate();
+        window.univer = undefined;
+        window.univerAPI = undefined;
+    });
+
+    window.univer = univer;
+    window.univerAPI = FUniver.newAPI(univer);
+}
+
+createNewInstance();
+window.createNewInstance = createNewInstance;
+
+declare global {
+    // eslint-disable-next-line ts/naming-convention
+    interface Window {
+        univer?: Univer;
+        univerAPI?: ReturnType<typeof FUniver.newAPI>;
+        createNewInstance?: typeof createNewInstance;
+    }
+}