一个开源的协作解决方案，可用于在线编辑Excel、Word、思维导图

郑子铭

发布于 2023-09-08 18:20:51

4.4K00

代码可运行

文章被收录于专栏：DotNet NB && CloudNativeDotNet NB && CloudNative

运行总次数：0

代码可运行

今天给大家一个开源的协作解决方案Univer，Univer是一套基于 Canvas 的前端框架，用于构建文档、电子表格和幻灯片。使用Univer用户可以同步在自己的系统中查看和编辑 Microsoft Office 文件，避免上传和下载 PPT、Word、Excel。

开发

环境依赖：

node.js version 16.20.0
pnpm version 8.6.2

整体架构

Univer 采用 typescript 编写，按照插件化架构进行设计，核心外的功能都以插件的形式进行开发，今后会建设插件市场，满足更加个性化的需求

渲染引擎

Univer sheet, document, slide 采用同一套渲染引擎架构，把应用抽象为文本流，表格，画布，core 部分触发渲染，object 为渲染器。

实践与预览

Excel

代码：

const { univerSheetCustom, CommonPluginData } = UniverPreactTs;

const uiSheetsConfig = {
    container: 'univer-demo',
    layout: {
      sheetContainerConfig: {
        countBar: false,
      },
    },
  };

univerSheetCustom({
    uiSheetsConfig
});

效果

Doc

代码：

const { univerDocCustom, UniverCore, CommonPluginData } = UniverPreactTs;

const { DEFAULT_DOCUMENT_DATA_EN } = CommonPluginData;

const coreConfig = UniverCore.Tools.deepClone(DEFAULT_DOCUMENT_DATA_EN);
coreConfig.id = UniverCore.Tools.generateRandomId();
coreConfig.pageSize = {
  width: 400,
  height: 225,
};

const uiDocsConfig = {
  container: 'univer-demo',
  layout: {
    docContainerConfig: {
      innerRight: false,
      outerLeft: false,
      infoBar: false,
      toolbar: true,
    },
  },
};
const univerdoc = univerDocCustom({
  coreConfig,
  uiDocsConfig,
});

效果