univer实现excel协同

快速入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/@univerjs/umd/lib/univer.full.umd.js"></script>
    <script src="https://unpkg.com/@univerjs/umd/lib/locale/zh-CN.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@univerjs/umd/lib/univer.css">
    <style>
        #app{
            width: 100%;
            height: 100vh;
        }
    </style>
</head>
<body>
    <div id="app"></div>

    <script>
        var {
          UniverCore,
          UniverDesign,
          UniverEngineRender,
          UniverEngineFormula,
          UniverDocs,
          UniverDocsUi,
          UniverUi,
          UniverSheets,
          UniverSheetsUi,
          UniverSheetsNumfmt,
          UniverSheetsFormula,
          UniverFacade,
        } = window
     
        var univer = new UniverCore.Univer({
          theme: UniverDesign.defaultTheme,
          locale: UniverCore.LocaleType.ZH_CN,
          locales: {
            [UniverCore.LocaleType.ZH_CN]: UniverUMD['zh-CN'],
          },
        });
     
        univer.registerPlugin(UniverEngineRender.UniverRenderEnginePlugin);
        univer.registerPlugin(UniverEngineFormula.UniverFormulaEnginePlugin);
     
        univer.registerPlugin(UniverUi.UniverUIPlugin, {
          container: "app",
        });
     
        univer.registerPlugin(UniverDocs.UniverDocsPlugin);
        univer.registerPlugin(UniverDocsUi.UniverDocsUIPlugin);
     
        univer.registerPlugin(UniverSheets.UniverSheetsPlugin);
        univer.registerPlugin(UniverSheetsUi.UniverSheetsUIPlugin);
        univer.registerPlugin(UniverSheetsNumfmt.UniverSheetsNumfmtPlugin);
        univer.registerPlugin(UniverSheetsFormula.UniverSheetsFormulaPlugin);
     
        univer.createUnit(UniverCore.UniverInstanceType.UNIVER_SHEET, {})
     
        const univerAPI = UniverFacade.FUniver.newAPI(univer)
      </script>
</body>
</html>

在这里插入图片描述

使用univer后端服务协同

后端部署

bash -c "$(curl -fsSL https://get.univer.ai)"

在这里插入图片描述
打开链接获取token，后续的安装就开始了
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
访问8000

curl http://127.0.0.1:8000

在这里插入图片描述

如果机器停止了，重启之后可以运行docker compose up启动

页面部署

说明服务启动起来了，引入js库尝试，发现报错

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/@univerjs/umd/lib/univer.full.umd.js"></script>
  <script src="https://unpkg.com/@univerjs/umd/lib/locale/zh-CN.js"></script>
  <script src="https://unpkg.com/@univerjs-pro/collaboration/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs-pro/collaboration-client/lib/umd/index.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/@univerjs/umd/lib/univer.css">
  <link rel="stylesheet" href="https://unpkg.com/@univerjs-pro/collaboration-client/lib/index.css">
  <style>
    #app {
      width: 100%;
      height: 100vh;
    }
  </style>
</head>

<body>
  <div id="app"></div>

  <script>
    var {
      UniverCore,
      UniverDesign,
      UniverEngineRender,
      UniverEngineFormula,
      UniverDocs,
      UniverDocsUi,
      UniverUi,
      UniverSheets,
      UniverSheetsUi,
      UniverSheetsNumfmt,
      UniverSheetsFormula,
      UniverFacade,
      UniverCollaborationPlugin,
      UniverCollaborationClientPlugin
    } = window

    var univer = new UniverCore.Univer({
      theme: UniverDesign.defaultTheme,
      locale: UniverCore.LocaleType.ZH_CN,
      locales: {
        [UniverCore.LocaleType.ZH_CN]: UniverUMD['zh-CN'],
      },
    });

    univer.registerPlugin(UniverEngineRender.UniverRenderEnginePlugin);
    univer.registerPlugin(UniverEngineFormula.UniverFormulaEnginePlugin);

    univer.registerPlugin(UniverUi.UniverUIPlugin, {
      container: "app",
    });

    univer.registerPlugin(UniverDocs.UniverDocsPlugin);
    univer.registerPlugin(UniverDocsUi.UniverDocsUIPlugin);

    univer.registerPlugin(UniverSheets.UniverSheetsPlugin);
    univer.registerPlugin(UniverSheetsUi.UniverSheetsUIPlugin);
    univer.registerPlugin(UniverSheetsNumfmt.UniverSheetsNumfmtPlugin);
    univer.registerPlugin(UniverSheetsFormula.UniverSheetsFormulaPlugin);
    
    univer.registerPlugin(UniverCollaborationPlugin);
    univer.registerPlugin(UniverCollaborationClientPlugin, {
      authzUrl: 'http://192.168.56.10:8000/universer-api/authz',
      snapshotServerUrl: 'http://192.168.56.10:8000/universer-api/snapshot',
      collabSubmitChangesetUrl: 'http://192.168.56.10:8000/universer-api/comb',
      collabWebSocketUrl: 'ws://192.168.56.10:8000/universer-api/comb/connect',
    });

    univer.createUnit(UniverCore.UniverInstanceType.UNIVER_SHEET, {})
    const univerAPI = UniverFacade.FUniver.newAPI(univer)
  </script>
</body>

</html>

在这里插入图片描述

vue3部署

采用vue3方式开发

 pnpm init
 pnpm create vite --registry=http://registry.npm.taobao.org

在这里插入图片描述

pnpm install --registry=http://registry.npm.taobao.org
pnpm run dev

安装依赖包

pnpm add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/engine-formula @univerjs/engine-render @univerjs/sheets @univerjs/sheets-formula @univerjs/sheets-ui @univerjs/ui --registry=http://registry.npm.taobao.org

pnpm add @univerjs/facade --registry=http://registry.npm.taobao.org

在这里插入图片描述
在这里插入图片描述
修改App.vue

<template>
  <div ref="excelContent" style="width: 100%;height: 900px;"></div>
</template>
<script setup lang="ts">

import "@univerjs/design/lib/index.css";
import "@univerjs/ui/lib/index.css";
import "@univerjs/docs-ui/lib/index.css";
import "@univerjs/sheets-ui/lib/index.css";
import "@univerjs/sheets-formula/lib/index.css";

import { onMounted, ref } from 'vue'
import { LocaleType, Tools, Univer, UniverInstanceType } from "@univerjs/core";
import { defaultTheme } from "@univerjs/design";

import { UniverFormulaEnginePlugin } from "@univerjs/engine-formula";
import { UniverRenderEnginePlugin } from "@univerjs/engine-render";

import { UniverUIPlugin } from "@univerjs/ui";

import { UniverDocsPlugin } from "@univerjs/docs";
import { UniverDocsUIPlugin } from "@univerjs/docs-ui";

import { UniverSheetsPlugin } from "@univerjs/sheets";
import { UniverSheetsFormulaPlugin } from "@univerjs/sheets-formula";
import { UniverSheetsUIPlugin } from "@univerjs/sheets-ui";

import DesignZhCN from '@univerjs/design/locale/zh-CN';
import UIZhCN from '@univerjs/ui/locale/zh-CN';
import DocsUIZhCN from '@univerjs/docs-ui/locale/zh-CN';
import SheetsZhCN from '@univerjs/sheets/locale/zh-CN';
import SheetsUIZhCN from '@univerjs/sheets-ui/locale/zh-CN';
import SheetsFormulaZhCN from '@univerjs/sheets-formula/locale/zh-CN';
import { FUniver } from '@univerjs/facade'

const excelContent = ref<HTMLElement | null>(null)

onMounted(() => {
  initSheet()
})

const initSheet = () => {
  const univer = new Univer({
    theme: defaultTheme,
    locale: LocaleType.ZH_CN,
    locales: {
      [LocaleType.ZH_CN]: Tools.deepMerge(
        SheetsZhCN,
        DocsUIZhCN,
        SheetsUIZhCN,
        SheetsFormulaZhCN,
        UIZhCN,
        DesignZhCN,
      ),
    },
  });

  univer.registerPlugin(UniverRenderEnginePlugin);
  univer.registerPlugin(UniverFormulaEnginePlugin);

  univer.registerPlugin(UniverUIPlugin, {
    container: excelContent.value!,
  });

  univer.registerPlugin(UniverDocsPlugin);
  univer.registerPlugin(UniverDocsUIPlugin);

  univer.registerPlugin(UniverSheetsPlugin);
  univer.registerPlugin(UniverSheetsUIPlugin);
  univer.registerPlugin(UniverSheetsFormulaPlugin);

  univer.createUnit(UniverInstanceType.UNIVER_SHEET, {});
  const univerAPI = FUniver.newAPI(univer)
}

</script>
<style scoped>
.excel-container {
  width: 100%;
  height: 100%;
  min-height: 90vh;
}
</style>

启动项目查看效果
在这里插入图片描述

协同编辑

pnpm add @univerjs-pro/collaboration @univerjs-pro/collaboration-client --registry=http://registry.npm.taobao.org

在这里插入图片描述
修改App.vue

<template>
  <div ref="excelContent" style="width: 100%;height: 900px;"></div>
</template>
<script setup lang="ts">

import "@univerjs/design/lib/index.css";
import "@univerjs/ui/lib/index.css";
import "@univerjs/docs-ui/lib/index.css";
import "@univerjs/sheets-ui/lib/index.css";
import "@univerjs/sheets-formula/lib/index.css";
import '@univerjs-pro/collaboration-client/lib/index.css';

import { onMounted, ref } from 'vue'
import { LocaleType, Tools, Univer, UniverInstanceType,IAuthzIoService,IUndoRedoService } from "@univerjs/core";
import { defaultTheme } from "@univerjs/design";

import { UniverFormulaEnginePlugin } from "@univerjs/engine-formula";
import { UniverRenderEnginePlugin } from "@univerjs/engine-render";

import { UniverUIPlugin } from "@univerjs/ui";

import { UniverDocsPlugin } from "@univerjs/docs";
import { UniverDocsUIPlugin } from "@univerjs/docs-ui";

import { UniverSheetsPlugin } from "@univerjs/sheets";
import { UniverSheetsFormulaPlugin } from "@univerjs/sheets-formula";
import { UniverSheetsUIPlugin } from "@univerjs/sheets-ui";

import DesignZhCN from '@univerjs/design/locale/zh-CN';
import UIZhCN from '@univerjs/ui/locale/zh-CN';
import DocsUIZhCN from '@univerjs/docs-ui/locale/zh-CN';
import SheetsZhCN from '@univerjs/sheets/locale/zh-CN';
import SheetsUIZhCN from '@univerjs/sheets-ui/locale/zh-CN';
import SheetsFormulaZhCN from '@univerjs/sheets-formula/locale/zh-CN';
import { FUniver } from '@univerjs/facade'

import { UniverCollaborationPlugin } from '@univerjs-pro/collaboration';
import { UniverCollaborationClientPlugin } from '@univerjs-pro/collaboration-client';
import CollaborationClientZhCN from '@univerjs-pro/collaboration-client/locale/zh-CN';

const excelContent = ref<HTMLElement | null>(null)

onMounted(() => {
  initSheet()
})

const initSheet = () => {
  const univer = new Univer({
    // 通过将 override 选项设置为 [[IAuthzIoService, null]]，可以告诉 Univer 不要注册内置的 IAuthzIoService。
    // 通过将 override 选项设置为 [[IUndoRedoService, null]]，可以告诉 Univer 不要注册内置的 IUndoRedoService
    // 这样，Univer 将使用 UniverCollaborationPlugin 中提供的服务作为权限、重做恢复服务的实现。
    override: [
      [IAuthzIoService,null],
      [IUndoRedoService,null],
    ],
    theme: defaultTheme,
    locale: LocaleType.ZH_CN,
    locales: {
      [LocaleType.ZH_CN]: Tools.deepMerge(
        SheetsZhCN,
        DocsUIZhCN,
        SheetsUIZhCN,
        SheetsFormulaZhCN,
        UIZhCN,
        DesignZhCN,
        CollaborationClientZhCN
      ),
    },
  });

  univer.registerPlugin(UniverRenderEnginePlugin);
  univer.registerPlugin(UniverFormulaEnginePlugin);

  univer.registerPlugin(UniverUIPlugin, {
    container: excelContent.value!,
  });

  univer.registerPlugin(UniverDocsPlugin);
  univer.registerPlugin(UniverDocsUIPlugin);

  univer.registerPlugin(UniverSheetsPlugin);
  univer.registerPlugin(UniverSheetsUIPlugin);
  univer.registerPlugin(UniverSheetsFormulaPlugin);

  univer.registerPlugin(UniverCollaborationPlugin);
  univer.registerPlugin(UniverCollaborationClientPlugin, {
    authzUrl: 'http://192.168.56.10:8000/universer-api/authz',
    snapshotServerUrl: 'http://192.168.56.10:8000/universer-api/snapshot',
    collabSubmitChangesetUrl: 'http://192.168.56.10:8000/universer-api/comb',
    collabWebSocketUrl: 'ws://192.168.56.10:8000/universer-api/comb/connect',
  });

  univer.createUnit(UniverInstanceType.UNIVER_SHEET, {});
  const univerAPI = FUniver.newAPI(univer)
  if(univerAPI){
    console.log("univerAPI")
  }
}

</script>
<style scoped>
.excel-container {
  width: 100%;
  height: 100%;
  min-height: 90vh;
}
</style>

在这里插入图片描述

一直离线状态，没搞清楚原因

把官方的例子跑起来了，说明后端是没有问题的
在这里插入图片描述

代码如下

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
      Univer UMD With Collaboration, Live Share, Print, Exchange
    </title>
    <script src="https://unpkg.com/@univerjs/umd/lib/univer.full.umd.js"></script>
    <script src="https://unpkg.com/@univerjs/umd/lib/locale/zh-CN.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@univerjs/umd/lib/univer.css">
  
    <script src="https://unpkg.com/@univerjs-pro/license/lib/umd/index.js"></script>
    
    <script src="https://unpkg.com/@univerjs-pro/collaboration/lib/umd/index.js"></script>
    <script src="https://unpkg.com/@univerjs-pro/collaboration-client/lib/umd/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@univerjs-pro/collaboration-client/lib/index.css">
  
    <script src="https://unpkg.com/@univerjs-pro/live-share/lib/umd/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@univerjs-pro/live-share/lib/index.css">
  
    <script src="https://unpkg.com/@univerjs-pro/print/lib/umd/index.js"></script>
    <script src="https://unpkg.com/@univerjs-pro/sheets-print/lib/umd/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@univerjs-pro/sheets-print/lib/index.css">
  
    <script src="https://unpkg.com/@univerjs-pro/exchange-client/lib/umd/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@univerjs-pro/exchange-client/lib/index.css">
  
    <script src="https://unpkg.com/@univerjs-pro/sheets-exchange-client/lib/umd/index.js"></script>
 
    <script src="https://unpkg.com/@univerjs-pro/engine-pivot/lib/umd/index.js"></script>
    <script src="https://unpkg.com/@univerjs-pro/sheets-pivot/lib/umd/index.js"></script>
    <script src="https://unpkg.com/@univerjs-pro/sheets-pivot-ui/lib/umd/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@univerjs-pro/sheets-pivot-ui/lib/index.css">
 
    <script src="https://unpkg.com/@univerjs-pro/edit-history-viewer/lib/umd/index.js"></script>
    <script src="https://unpkg.com/@univerjs-pro/edit-history-loader/lib/umd/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@univerjs-pro/edit-history-viewer/lib/index.css">
    <style>
      body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
      }
  
      #app {
        height: 100vh;
        width: 100vw;
      }
    </style>
  </head>
  
  <body>
    <div id="app"></div>
    <script>
      var {
        UniverCore,
        UniverDesign,
        UniverEngineRender,
        UniverEngineFormula,
        UniverDocs,
        UniverDocsUi,
        UniverUi,
        UniverSheets,
        UniverSheetsUi,
        UniverSheetsNumfmt,
        UniverCollaboration,
        UniverCollaborationClient,
        UniverSheetsThreadComment,
        UniverExchangeClient,
        UniverFacade
      } = window;
      var { UniverSheetsFormulaPlugin } = UniverSheetsFormula;
      var { UniverSheetsExchangeClientPlugin } = UniverSheetsExchangeClient;
      var { UniverSheetsNumfmtPlugin } = UniverSheetsNumfmt;
      var { UniverDocsPlugin } = UniverDocs;
      var { UniverRenderEnginePlugin } = UniverEngineRender;
      var { UniverFormulaEnginePlugin } = UniverEngineFormula;
      var { UniverUIPlugin } = UniverUi;
      var { UniverDocsUIPlugin } = UniverDocsUi;
      var { UniverSheetsPlugin } = UniverSheets;
      var { UniverSheetsUIPlugin } = UniverSheetsUi;
      var { UniverSheetsPivotTablePlugin } = UniverSheetsPivot;
      var { UniverSheetsPivotTableUIPlugin } = UniverSheetsPivotUi;
      var { UniverEditHistoryLoaderPlugin } = UniverEditHistoryLoader;
      var { UniverCollaborationPlugin } = UniverCollaboration;
      var { UniverCollaborationClientPlugin } = UniverCollaborationClient;
      var { UniverLiveSharePlugin } = UniverLiveShare;
      var { UniverSheetsPrintPlugin } = UniverSheetsPrint;
      var { UniverSheetsThreadCommentPlugin, IThreadCommentMentionDataService } = UniverSheetsThreadComment;
      var { defaultTheme, greenTheme } = UniverDesign;
      var { FUniver } = UniverFacade;
      var { UniverExchangeClientPlugin }= UniverExchangeClient;
      var {UniverLicensePlugin} = UniverLicense;
      var {
        UniverInstanceType,
        Tools,
        IUndoRedoService,
        IAuthzIoService,
        LocaleType,
        Univer,
        IConfigService
      } = window.UniverCore;
    </script>
    <script>
      // 你好，开发者，这是一个简单的示例，展示如何使用 Univer UMD 实现协作、实时共享、打印和导入导出功能
      // 如果你想使用协作、实时共享、打印和交换功能，你需要配置 `universerEndpoint`
      // `universerEndpoint` 是提供协作、实时共享、打印和交换服务的 Univer 后端服务器地址
      // 你可以在自己的服务器上部署 Univer 服务器，详见部署指南：https://univer.ai/zh-CN/guides/sheet/server/docker
  
      const universerEndpoint = '192.168.56.10:8000';
  
      // 协同插件从 URL 中获取 unit 参数，如果没有 unit 参数，则创建一个新的 unit
      const url = new URL(window.location.href)
      const unit = url.searchParams.get('unit')
      if (unit) {
  
        // 加载协作、打印、交换的国际化资源
        Promise.all([
          fetch('https://unpkg.com/@univerjs-pro/collaboration-client/lib/locale/zh-CN.json').then(res => res.json()),
          fetch('https://unpkg.com/@univerjs-pro/sheets-print/lib/locale/zh-CN.json').then(res => res.json()),
          fetch('https://unpkg.com/@univerjs-pro/exchange-client/lib/locale/zh-CN.json').then(res => res.json()),
          fetch('https://unpkg.com/@univerjs-pro/edit-history-viewer/lib/locale/zh-CN.json').then(res => res.json()),
          fetch('https://unpkg.com/@univerjs-pro/sheets-pivot/lib/locale/zh-CN.json').then(res => res.json()),
          fetch('https://unpkg.com/@univerjs-pro/sheets-pivot-ui/lib/locale/zh-CN.json').then(res => res.json()),
      ]).then((langs) => {
          setup(Tools.deepMerge(UniverUMD['zh-CN'],...langs));
        })
      } else {
        const { UniverInstanceType } = window.UniverCore;
        fetch(`http://${universerEndpoint}/universer-api/snapshot/${UniverInstanceType.UNIVER_SHEET}/unit/-/create`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            type: UniverInstanceType.UNIVER_SHEET,
            name: 'New Sheet By Univer',
            creator: 'user',
          }),
        }).then((response) => {
          if (!response.ok) {
            throw new Error('Failed to create new sheet')
          }
  
          return response.json()
        }).then((data) => {
          if (!data.unitID) {
            throw new Error('create unit failed')
          }
  
          url.searchParams.set('unit', data.unitID)
          url.searchParams.set('type', String(UniverInstanceType.UNIVER_SHEET))
          window.location.href = url.toString()
        }).catch((error) => {
          console.error(error)
        })
      }
  
      const setup = (locales) => {
        var univer = new Univer({
          theme: defaultTheme,
          locale: LocaleType.ZH_CN,
          locales:{
              [LocaleType.ZH_CN]: locales,
          },
          override: [
            [IAuthzIoService, null],
            [IUndoRedoService, null]
          ]
        });
        univer.registerPlugin(UniverRenderEnginePlugin);
        univer.registerPlugin(UniverDocsPlugin);
        univer.registerPlugin(UniverFormulaEnginePlugin);
        univer.registerPlugin(UniverSheetsFormulaPlugin);
  
        univer.registerPlugin(UniverUIPlugin, {
          container: "app",
        });
  
        univer.registerPlugin(UniverDocsUIPlugin);
  
        univer.registerPlugin(UniverSheetsPlugin);
        univer.registerPlugin(UniverSheetsUIPlugin);
  
        const mockUser = {
          userID: 'mockId',
          name: 'MockUser',
          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,
        };
        class CustomMentionDataService {
          trigger = '@';
  
          async getMentions (search) {
            return [
              {
                id: mockUser.userID,
                label: mockUser.name,
                type: 'user',
                icon: mockUser.avatar,
              },
              {
                id: '2',
                label: 'User2',
                type: 'user',
                icon: mockUser.avatar,
              },
            ];
          }
        }
  
        univer.registerPlugin(UniverSheetsThreadCommentPlugin, {
          overrides: [[IThreadCommentMentionDataService, { useClass: CustomMentionDataService }]],
        });
  
        // 注册协同插件
        univer.registerPlugin(UniverCollaborationPlugin);
        univer.registerPlugin(UniverCollaborationClientPlugin, {
          authzUrl: `http://${universerEndpoint}/universer-api/authz`,
          snapshotServerUrl: `http://${universerEndpoint}/universer-api/snapshot`,
          collabSubmitChangesetUrl: `http://${universerEndpoint}/universer-api/comb`,
          collabWebSocketUrl: `ws://${universerEndpoint}/universer-api/comb/connect`,
          // 如果你使用了导入导出插件，需要配置以下参数
          uploadFileServerUrl: `http://${universerEndpoint}/universer-api/stream/file/upload`,
          signUrlServerUrl: `http://${universerEndpoint}/universer-api/file/{fileID}/sign-url`,
        });
  
        // 注册实时共享插件
        univer.registerPlugin(UniverLiveSharePlugin)
  
        // 注册打印插件
        univer.registerPlugin(UniverSheetsPrintPlugin)
  
        // 注册导入导出插件
        univer.registerPlugin(UniverExchangeClientPlugin, {
          uploadFileServerUrl: `http://${universerEndpoint}/universer-api/stream/file/upload`,
          importServerUrl: `http://${universerEndpoint}/universer-api/exchange/{type}/import`,
          exportServerUrl: `http://${universerEndpoint}/universer-api/exchange/{type}/export`,
          getTaskServerUrl: `http://${universerEndpoint}/universer-api/exchange/task/{taskID}`,
          signUrlServerUrl: `http://${universerEndpoint}/universer-api/file/{fileID}/sign-url`,
        })
        univer.registerPlugin(UniverSheetsExchangeClientPlugin)
      }
    </script>
  </body>
  </html>

使用websocket协同

pnpm init
pnpm add ws --registry=http://registry.npm.taobao.org

修改package.json

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "node index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "ws": "^8.18.0"
  }
}

新建index.js

//创建一个WebSocket服务器，在8080端口启动
const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8089 });
console.log("websocket服务器启动于:localhost:8089");

// 监听前端连接websocket（ws.on的connection事件）
server.on('connection', function connection(ws, req) {
  const ip = req.socket.remoteAddress;
  const port = req.socket.remotePort;
  const clientName = ip + port;
 
  console.log('%s 连接了', clientName);

  ws.on('message', (msg = {}) => {
    console.log('客户端发送给服务器端', msg.toString('utf8'));
    // 由服务端往客户端发送数据
    server.clients.forEach((client) => {
      //console.log(client, 'client');
      client.send(msg);
    });
  });
});
//只要有WebSocket连接到该服务器，就会触发'connection'事件；req对象可以用来获取客户端的信息，如ip、端口号
//获取所有已连接的客户端信息，则可以使用server.clients数据集
 
// 服务器接收数据（ws.on的message事件）
// module.exports.listener = () => {
//   server.on('connection', (ws, req) => {
//     console.log('有客户端连接成功了', ws, req);
 
//     // 对客户端的连接对象进行message事件的监听
//     // 当客户端有消息发送给服务器时，服务器就能够触发该消息
//     // msg:由客户端发给服务端的数据
//     ws.on('message', (msg = {}) => {
//       console.log('客户端发送给服务器端', msg);
//       // 当接收到客户端传的参数之后服务器端可以执行某些操作(具体看需求)
//       // 小编这里是做了一个数据返回给客户端
//       // 是当客户端连接成功之后会发送一条信息告诉服务器，服务器监听到信息之后再返回数据给客户端
 
//       // 由服务端往客户端发送数据
//       server.clients.forEach((client) => {
//         console.log(client, 'client');
//         // client.send(JSON.stringify(info));
//         client.send(msg);
//       });
//     });
//   });
// };

把websocket启动起来

pnpm run dev

前端参考vue3搭建起来，然后修改App.vue

<template>
  <div id="excelContent" style="width: 100%;height: 900px;"></div>
</template>

<script setup lang="ts">
import "@univerjs/design/lib/index.css";
import "@univerjs/ui/lib/index.css";
import "@univerjs/docs-ui/lib/index.css";
import "@univerjs/sheets-ui/lib/index.css";
import "@univerjs/sheets-formula/lib/index.css";

import { onMounted, ref } from 'vue'
import { LocaleType, Tools, Univer, UniverInstanceType } from "@univerjs/core";
import { defaultTheme } from "@univerjs/design";

import { UniverFormulaEnginePlugin } from "@univerjs/engine-formula";
import { UniverRenderEnginePlugin } from "@univerjs/engine-render";

import { UniverUIPlugin } from "@univerjs/ui";

import { UniverDocsPlugin } from "@univerjs/docs";
import { UniverDocsUIPlugin } from "@univerjs/docs-ui";

import { UniverSheetsPlugin } from "@univerjs/sheets";
import { UniverSheetsFormulaPlugin } from "@univerjs/sheets-formula";
import { UniverSheetsUIPlugin } from "@univerjs/sheets-ui";

import DesignZhCN from '@univerjs/design/locale/zh-CN';
import UIZhCN from '@univerjs/ui/locale/zh-CN';
import DocsUIZhCN from '@univerjs/docs-ui/locale/zh-CN';
import SheetsZhCN from '@univerjs/sheets/locale/zh-CN';
import SheetsUIZhCN from '@univerjs/sheets-ui/locale/zh-CN';
import SheetsFormulaZhCN from '@univerjs/sheets-formula/locale/zh-CN';
import { FUniver } from '@univerjs/facade'

onMounted(() => {
  initSheet()
})

const initSheet = () => {
  const univer = new Univer({
    theme: defaultTheme,
    locale: LocaleType.ZH_CN,
    locales: {
      [LocaleType.ZH_CN]: Tools.deepMerge(
        SheetsZhCN,
        DocsUIZhCN,
        SheetsUIZhCN,
        SheetsFormulaZhCN,
        UIZhCN,
        DesignZhCN,
      ),
    },
  });

  univer.registerPlugin(UniverRenderEnginePlugin);
  univer.registerPlugin(UniverFormulaEnginePlugin);

  univer.registerPlugin(UniverUIPlugin, {
    container: 'excelContent',
  });

  univer.registerPlugin(UniverDocsPlugin);
  univer.registerPlugin(UniverDocsUIPlugin);

  univer.registerPlugin(UniverSheetsPlugin);
  univer.registerPlugin(UniverSheetsUIPlugin);
  univer.registerPlugin(UniverSheetsFormulaPlugin);

  //必须指定id
  univer.createUnit(UniverInstanceType.UNIVER_SHEET, {
    id: 'univer-1',
    sheets: {
      'sheet-01': {
        id: 'sheet-01',
        name: 'sheet1',
        cellData: {},
      },
    },
  });
  const univerAPI = FUniver.newAPI(univer)


  const ws = univerAPI.createSocket('ws://localhost:8089');

  ws.open$.subscribe(() => {
    console.log('websocket opened');
    // ws.send('hello')
  });

  ws.message$.subscribe((message) => {
    const data = message.data;
    let result = '';
    if (data instanceof Blob) {
      // Create a FileReader to read the Blob data  
      const reader = new FileReader();

      // Define the onload event handler  
      reader.onload = (e) => {
        // The result property contains the data as a typed array or string  
        // Here we assume the data is a UTF-8 encoded string  
        const resultData = e.target?.result
        if (typeof resultData == 'string') {
          result = resultData;
          console.log(result);
          console.log('websocket message', result);
          const content = JSON.parse(result);//JSON.parse(message.data);
          console.log('content', content);

          const { command, options } = content;

          const { id, params } = command;

          console.log(params, 'params--------');

          // 接受到协同数据，本地落盘
          univerAPI.executeCommand(id, params, options);
        }
      };

      // Read the Blob data as a text string  
      reader.readAsText(data, 'utf-8');
    } else if (typeof data === 'string') {
      result = data;
      //console.log('websocket message', JSON.parse(message.data));
      console.log('websocket message', result);
      const content = JSON.parse(result);//JSON.parse(message.data);
      console.log('content', content);

      const { command, options } = content;

      const { id, params } = command;

      console.log(params, 'params--------');

      // 接受到协同数据，本地落盘
      univerAPI.executeCommand(id, params, options);
    }

  });

  ws.close$.subscribe(() => {
    console.log('websocket closed');
  });

  ws.error$.subscribe((error) => {
    console.log('websocket error', error);
  });

  univerAPI.onCommandExecuted((command, options) => {
    // 仅同步本地 mutation
    if (
      command.type !== 2 ||
      options?.fromCollab ||
      options?.onlyLocal ||
      command.id === 'doc.mutation.rich-text-editing'
    ) {
      return;
    }

    const commandInfo = JSON.stringify({
      command,
      options: { fromCollab: true },
    });
    console.log(commandInfo, 'commandInfo');
    ws.send(commandInfo);
  });
}
</script>

<style scoped></style>

在这里插入图片描述

导入导出禁止编辑

在这里插入图片描述
IWorksheetData
IWorkBookData
ICellData
导入导出
导入导出
导入的例子
导入导出

创建vue+univer项目

pnpm create vite --registry=http://registry.npm.taobao.org
pnpm add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/engine-formula @univerjs/engine-render @univerjs/sheets @univerjs/sheets-formula @univerjs/sheets-ui @univerjs/ui --registry=http://registry.npm.taobao.org
pnpm add @univerjs/facade --registry=http://registry.npm.taobao.org
pnpm add @univerjs-pro/facade --registry=http://registry.npm.taobao.org

App.vue

<template>
  <div>
    <button @click="importExcel">加载数据</button>
    <button @click="updateData">更新数据</button>
    <button @click="closeOrOpenEditor">禁止或者开启编辑</button>
    <button @click="saveData">保存数据</button>
  </div>
  <div ref="excelContent" style="width: 100%;height: 900px;"></div>
</template>

<script setup lang="ts">


import "@univerjs/design/lib/index.css";
import "@univerjs/ui/lib/index.css";
import "@univerjs/docs-ui/lib/index.css";
import "@univerjs/sheets-ui/lib/index.css";
import "@univerjs/sheets-formula/lib/index.css";

import {onMounted, ref} from 'vue'
import {LocaleType, Tools, Univer, UniverInstanceType, IWorkbookData, BooleanNumber} from "@univerjs/core";
import {defaultTheme} from "@univerjs/design";

import {UniverFormulaEnginePlugin} from "@univerjs/engine-formula";
import {UniverRenderEnginePlugin} from "@univerjs/engine-render";

import {UniverUIPlugin} from "@univerjs/ui";

import {UniverDocsPlugin} from "@univerjs/docs";
import {UniverDocsUIPlugin} from "@univerjs/docs-ui";

import {UniverSheetsPlugin} from "@univerjs/sheets";
import {UniverSheetsFormulaPlugin} from "@univerjs/sheets-formula";
import {UniverSheetsUIPlugin} from "@univerjs/sheets-ui";

import DesignZhCN from '@univerjs/design/locale/zh-CN';
import UIZhCN from '@univerjs/ui/locale/zh-CN';
import DocsUIZhCN from '@univerjs/docs-ui/locale/zh-CN';
import SheetsZhCN from '@univerjs/sheets/locale/zh-CN';
import SheetsUIZhCN from '@univerjs/sheets-ui/locale/zh-CN';
import SheetsFormulaZhCN from '@univerjs/sheets-formula/locale/zh-CN';
import {FUniver} from "@univerjs-pro/facade";

const excelContent = ref<HTMLElement | null>(null)

onMounted(() => {
  initSheet()
})

let canEditor = true;
let univerAPI: FUniver | null = null;
let univer: Univer | null = null;
const initSheet = () => {
  univer = new Univer({
    theme: defaultTheme,
    locale: LocaleType.ZH_CN,
    locales: {
      [LocaleType.ZH_CN]: Tools.deepMerge(
          SheetsZhCN,
          DocsUIZhCN,
          SheetsUIZhCN,
          SheetsFormulaZhCN,
          UIZhCN,
          DesignZhCN,
      ),
    },
  });

  univer.registerPlugin(UniverRenderEnginePlugin);
  univer.registerPlugin(UniverFormulaEnginePlugin);

  univer.registerPlugin(UniverUIPlugin, {
    container: excelContent.value!,
  });

  univer.registerPlugin(UniverDocsPlugin);
  univer.registerPlugin(UniverDocsUIPlugin);

  univer.registerPlugin(UniverSheetsPlugin);
  univer.registerPlugin(UniverSheetsUIPlugin);
  univer.registerPlugin(UniverSheetsFormulaPlugin);
}
const importExcel = () => {
  const workbook: IWorkbookData = {
    id: '007',//唯一id
    name: '部门人数统计',
    appVersion: '1.0.0',
    locale: LocaleType.ZH_CN,
    styles: {},
    sheetOrder: ['sheet1', 'sheet2'],
    sheets: {
      sheet1: {
        id: 'sheet1',
        name: '工作表 1',
        tabColor: '#FF0000',
        hidden: BooleanNumber.FALSE,
        freeze: {xSplit: 1, ySplit: 1, startRow: 1, startColumn: 1},
        rowCount: 1000,
        columnCount: 26,
        defaultColumnWidth: 100,
        defaultRowHeight: 25,
        mergeData: [],
        cellData: {
          // 第一行
          0: {
            //t表示类型 布尔、字符串和数字 https://univer.ai/typedoc/@univerjs/core/enumerations/CellValueType
            // 第一列
            0: {v: 'A1'},
            // 第二列
            1: {v: 'B1'},
          },
          // 第二行
          1: {
            // 第一列
            0: {v: 'A2'},
            // 第二列
            1: {v: 'B2'},
          },
        },
        rowData: [],
        columnData: [],
        rowHeader: {width: 40},
        columnHeader: {height: 20},
        showGridlines: BooleanNumber.TRUE,
        rightToLeft: BooleanNumber.FALSE
      },
      sheet2: {}
    }
  };
  if (univer != null) {
    console.log('univer!=null')
    if (univerAPI == null) {
      //模拟服务端获取数据
      univer.createUnit(UniverInstanceType.UNIVER_SHEET, workbook);
      univerAPI = FUniver.newAPI(univer);
    }
  } else {
    console.log('univer==null')
  }
}

const updateData = () => {
  if (univerAPI != null) {
    const sheet = univerAPI.getActiveWorkbook()?.getActiveSheet();
    // A1 设置数字 100
    const range = sheet?.getRange(0, 0, 1, 1);
    range?.setValue(100);
  }
}

const closeOrOpenEditor = () => {
  canEditor = !canEditor;
  if (univerAPI != null) {
    const workBook = univerAPI.getActiveWorkbook();
    workBook?.setEditable(canEditor);
  }
}

const saveData = () => {
  if (univerAPI != null) {
    const savedExcel = univerAPI.getActiveWorkbook()?.save();
    if (savedExcel != null) {
      console.log(savedExcel)
    }
  }else{
    console.log('数据为空')
  }
}
</script>

<style scoped>
</style>

在这里插入图片描述
配置单元格边框颜色

cellData: {
  // 第一行
  0: {
    //t表示类型 布尔、字符串和数字 https://univer.ai/typedoc/@univerjs/core/enumerations/CellValueType
    // 第一列
    0: {
      v: 'A1',
    },
    // 第二列
    1: {v: 'B1'},
  },
  // 第二行
  1: {
    // 第一列
    0: {v: 'A2'},
    // 第二列
    1: {
      v: 'B2',
      //边框
      s: {
        bd: {
          // 上边框
          t: {
            s: 7, // 边框样式
            cl: {  // 边框颜色
              rgb: '#ff0000'
            }
          },
          // 下边框
          b: {
            s: 7, // 边框样式
            cl: {  // 边框颜色
              rgb: '#ff0000'
            }
          },
          // 左边框
          l: {
            s: 7, // 边框样式
            cl: {  // 边框颜色
              rgb: '#ff0000'
            }
          },
          // 右边框
          r: {
            s: 7, // 边框样式
            cl: {  // 边框颜色
              rgb: '#ff0000'
            }
          },
        }
      }
    },
  },
},

在这里插入图片描述

高亮显示

pnpm add @univerjs/sheets-crosshair-highlight --registry=http://registry.npm.taobao.org

参考

https://univer.ai/zh-CN/guides/sheet/introduction
https://blog.csdn.net/m0_73884922/article/details/139971295
https://github.com/dream-num/usip-example/tree/main
https://github.com/dream-num/univer-pro-sheet-start-kit
https://github.com/dream-num/univer-sheet-start-kit

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/890210.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

怎么看待数字化转型是大势所趋？

怎么看待数字化转型是大势所趋？

怎么看到数字化转型是大势所趋&#xff1f;下面我结合最新数据给大家讲明白这个事。 近日&#xff0c;我通过大量的数据相关性分析&#xff0c;有了一些关键发现。 【数字化转型】之所以势在必行&#xff0c;主要是因为数字化转型为各个国家数字经济发展提供了重要的参考依据。…
阅读更多...
使用js和canvas实现简单的网页贪吃蛇小游戏

使用js和canvas实现简单的网页贪吃蛇小游戏

玩法介绍 点击开始游戏后&#xff0c;使用键盘上的↑↓←→控制移动&#xff0c;吃到食物增加长度&#xff0c;碰到墙壁或碰到自身就游戏结束 代码实现 代码比较简单&#xff0c;直接阅读注释即可&#xff0c;复制即用 <!DOCTYPE html> <html lang"en"…
阅读更多...
SAP将假脱机(Spool requests)内容转换为PDF文档[RSTXPDFT4]

SAP将假脱机(Spool requests)内容转换为PDF文档[RSTXPDFT4]

将假脱机(Spool requests)内容转换为PDF文档[RSTXPDFT4] 有时需要将Spool中的内容导出成PDF文件&#xff0c;sap提供了一个标准程序RSTXPDFT4可以实现此功能。 1, Tcode:SP01, 进入spool requests list 2, SE38 运行程序RSTXPDFT4 输入spool reqeust号码18680&#xff0c;然后…
阅读更多...
im架构分享 即时通讯架构 即时消息 全球架构师峰会im分享 im分布式 企业级im架构 分布式im 即时通讯im架构

im架构分享 即时通讯架构 即时消息 全球架构师峰会im分享 im分布式 企业级im架构 分布式im 即时通讯im架构

1. 之前收藏的淘宝李厉岷老师在全球架构师峰会上做的im技术分享&#xff0c;贴出来备注下。 2. 李老师infoQ主页链接&#xff1a; 李历岷 3. 文章&#xff1a; 电商IM消息系统架构演进_ArchSummit_李历岷_InfoQ精选文章 4. ppt下载地址 &#xff08;注&#xff1a;同期还有…
阅读更多...
GAN(Generative Adversarial Nets)

GAN(Generative Adversarial Nets)

GAN(Generative Adversarial Nets) 引言 GAN由Ian J. Goodfellow等人提出&#xff0c;是Ian J. Goodfellow的代表作之一&#xff0c;他还出版了大家耳熟能详的花书&#xff08;Deep Learning深度学习&#xff09;&#xff0c;GAN主要的思想是同时训练两个模型&#xff0c;生成…
阅读更多...
蓝桥杯刷题--幸运数字

蓝桥杯刷题--幸运数字

幸运数字 题目: 解析: 我们由题目可以知道,某个进制的哈沙德数就是该数和各个位的和取整为0.然后一个幸运数字就是满足所有进制的哈沙德数之和.然后具体就是分为以下几个步骤 1. 我们先写一个方法,里面主要是用来判断,这个数在该进制下是否是哈沙德数 2. 我们在main方法里面调用…
阅读更多...
推荐几本编程入门书目

推荐几本编程入门书目

对于编程入门&#xff0c;推荐以下几本书籍&#xff0c;这些书籍覆盖了不同的编程语言&#xff0c;适合零基础的学习者逐步掌握编程基础&#xff1a; 1. 《Python编程快速上手——让繁琐工作自动化》 特点&#xff1a;以简单易懂的方式介绍了Python的基础知识和编程概念&#…
阅读更多...
【最新华为OD机试E卷-支持在线评测】构成正方形的数量(100分)多语言题解-(Python/C/JavaScript/Java/Cpp)

【最新华为OD机试E卷-支持在线评测】构成正方形的数量(100分)多语言题解-(Python/C/JavaScript/Java/Cpp)

🍭 大家好这里是春秋招笔试突围 ，一枚热爱算法的程序员 💻 ACM金牌🏅️团队 ｜ 大厂实习经历 ｜ 多年算法竞赛经历 ✨ 本系列打算持续跟新华为OD-E/D卷的多语言AC题解 🧩 大部分包含 Python / C / Javascript / Java / Cpp 多语言代码 👏 感谢大家的订阅➕ 和 喜欢�…
阅读更多...
vue实现列表自动滚动(纯与原生方式)

vue实现列表自动滚动(纯与原生方式)

Vue实现列表自动滚动(纯与原生方式) 源码放在最后&#xff01;1.效果展示: 2.功能说明: 该滚动可能存在的Bug&#xff1a; 1.如果你写的大屏不是使用的接口轮询的方式可能会存在也页面空白的情况(需要手动刷新才能触发列表滚动)&#xff0c;因为我使用的是监听数据的变化然后…
阅读更多...
【C++】关联式容器——map和set的使用

【C++】关联式容器——map和set的使用

文章目录 一、 序列式容器和关联式容器二、set的介绍1.set的构造和迭代器2.set的增删查3.接口lower_bound和upper_bound4.multiset和set的差异 三、map的介绍1.map的构造2.map的增删查3.multimap和map的差异 四、map和set相关OJ 一、 序列式容器和关联式容器 序列式容器&#…
阅读更多...
WordPress添加meta标签做seo优化

WordPress添加meta标签做seo优化

一、使用function.php文件添加钩子函数添加 方法1、使用is_page()判断不同页面的page_id进行辨别添加不同页面keyword和description &#xff08;1&#xff09;通过页面前台源码查看对应页面的id &#xff08;2&#xff09;或者通过wordpress后台&#xff0c;点击页面列表&…
阅读更多...
【网易云音乐】--源代码分享

【网易云音乐】--源代码分享

最近写了一个网易云音乐的音乐实现部分&#xff0c;是通过JavaScript和jQuery实现的&#xff0c;具体效果大家可以参照下面的视频 源代码分享 - git地址: 网易云音乐源代码 下面将着重讲解一下音乐实现部分 视频有点模糊&#xff0c;不好意思&#xff0c;在b站上添加视频的时候…
阅读更多...
Ping32：专业的终端安全管理解决方案

Ping32：专业的终端安全管理解决方案

在当今数字化转型迅速发展的时代&#xff0c;终端安全管理已成为企业信息安全的重要环节。随着远程办公和移动设备的普及&#xff0c;企业面临着越来越多的网络安全挑战。Ping32作为一款专业的终端安全管理解决方案&#xff0c;以其卓越的性能和易用性&#xff0c;成为众多企业…
阅读更多...
[Linux] Linux 进程程序替换

[Linux] Linux 进程程序替换

标题&#xff1a;[Linux] Linux 进程程序替换 个人主页水墨不写bug &#xff08;图片来源于网络&#xff09; 目录 O、前言 一、进程程序替换的直观现象&#xff08;什么是进程程序替换&#xff1f;&#xff09; 二、进程程序替换的原理 三、进程程序替换的函数&#xff08…
阅读更多...
几种Word Embedding技术详解

几种Word Embedding技术详解

NLP 中的词嵌入是一个重要术语&#xff0c;用于以实值向量的形式表示用于文本分析的单词。这是 NLP 的一项进步&#xff0c;提高了计算机更好地理解基于文本的内容的能力。它被认为是深度学习在解决具有挑战性的自然语言处理问题方面最重要的突破之一。 在这种方法中&#xff…
阅读更多...
有了WPF后Winform还有活路吗？

有了WPF后Winform还有活路吗？

近年来&#xff0c;随着技术的不断发展&#xff0c;Windows Presentation Foundation&#xff08;WPF&#xff09;和Windows Forms&#xff08;WinForms&#xff09;这两种技术在开发桌面应用程序方面一直备受关注。虽然WPF以其强大的功能和灵活性吸引了众多开发者&#xff0c;…
阅读更多...
快速上手C语言【上】（非常详细！！！）

快速上手C语言【上】（非常详细！！！）

目录 1. 基本数据类型 2. 变量 2.1 定义格式 和 命名规范 2.2 格式化输入和输出&#xff08;scanf 和 printf&#xff09; ​编辑 2.3 作用域和生命周期 3. 常量 4. 字符串转义字符注释 5. 操作符 5.1 双目操作符 5.1.1 算数操作符 5.1.2 移位操作符 5.1.3 位操作符…
阅读更多...
架构设计笔记-7-系统架构设计基础知识

架构设计笔记-7-系统架构设计基础知识

目录 知识要点 单选 案例分析 1.质量属性 / 管道过滤器 / 数据仓库风格 2.面向对象风格 / 控制环路风格 3.软件架构风格 / 架构风格选择 4.体系结构方案对比 5.面向对象风格 / 基于规则风格 6.解释器风格 / 管道过滤器风格 7.面向对象风格 / 解释器风格 8.软件架构复…
阅读更多...
【宝可梦】游戏

【宝可梦】游戏

pokemmo https://pokemmo.com/zh/ 写在最后&#xff1a;若本文章对您有帮助&#xff0c;请点个赞啦 ٩(๑•̀ω•́๑)۶
阅读更多...
OpenCV 环境配置

OpenCV 环境配置

首先下载opencv&#xff0c;在opencv官网进行下载。 按照上面的步骤&#xff0c;点击进去 滑至底部&#xff0c;不切换至不同页&#xff0c;选择合适的版本进行下载(Window系统选择Windows版本进行下载)。 接下来以4.1.2版本为例&#xff1a; 点击之后会进入这个页面&#xff…
阅读更多...
最新文章

Copyright @ 2022~2023