Vue3使用Univer Docs创建在线编辑Excel的示例代码-牛翰网

一、Univer Docs 简介

Univer 是一套企业文档与数据协同解决方案，包括电子表格、文档和幻灯片三大文档类型，高可扩展性设计使得开发者可以在 Univer 的基础上定制个性化功能。

它的前身是Luckysheet ，Luckysheet 是一款纯前端类似excel的在线表格，功能强大、配置简单、完全开源。一款纯前端类似excel的在线表格，功能强大、配置简单、完全开源。

下面附上两个版本的官网地址：

Luckysheet ：https://mengshukeji.gitee.io/LuckysheetDocs/zh/

Univer Docs ：https://univer.ai/guides/introduction/

二、安装Univer

推荐使用 npm >= 8.0.0，以便自动安装 peerDependencies。

//执行下面的命令
npm install @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

三、在页面中使用

1、在页面中引入对应的文件

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

import { Univer } from "@univerjs/core";
import { defaultTheme } from "@univerjs/design";
import { UniverDocsPlugin } from "@univerjs/docs";
import { UniverDocsUIPlugin } from "@univerjs/docs-ui";
import { UniverFormulaEnginePlugin } from "@univerjs/engine-formula";
import { UniverRenderEnginePlugin } from "@univerjs/engine-render";
import { UniverSheetsPlugin } from "@univerjs/sheets";
import { UniverSheetsFormulaPlugin } from "@univerjs/sheets-formula";
import { UniverSheetsUIPlugin } from "@univerjs/sheets-ui";
import { UniverUIPlugin } from "@univerjs/ui";
import { onBeforeUnmount, onMounted, ref } from "vue";
</script>

2、创建一个 Univer 实例，并注册这些插件

<script setup>
const univer = ref(null);
const container = ref(null);
const univer = new Univer({
    theme: defaultTheme,
  });
  univer.value = univer;

  // core plugins
  univer.registerPlugin(UniverRenderEnginePlugin);
  univer.registerPlugin(UniverFormulaEnginePlugin);
  univer.registerPlugin(UniverUIPlugin, {
    container: container.value,//注意！！！container为需要展示图标的容器的ref
    header: true,
    toolbar: true,
    footer: true,
  });

  // doc plugins
  univer.registerPlugin(UniverDocsPlugin, {
    hasScroll: false,
  });
  univer.registerPlugin(UniverDocsUIPlugin);

  // sheet plugins
  univer.registerPlugin(UniverSheetsPlugin);
  univer.registerPlugin(UniverSheetsUIPlugin);
  univer.registerPlugin(UniverSheetsFormulaPlugin);
</script>

3、创建一个空白的 Univer Sheet

univer.createUniverSheet({});

4、加载数据与存储

加载

通过调用 Univer 的 createUniverSheet 方法，可以创建一个新的 Workbook 实例。方法的第一个参数是一个对象，包含了 Workbook 的数据，应该符合 IWorkbookData 接口。

import { IWorkbookData } from "@univerjs/core";

// ... create univer instance and load plugins

const data: IWorkbookData = {};
const workbook = univer.createUniverSheet(data);

存储

通过调用 Workbook 的 save 方法，可以得到 IWorkbookData 对象，包含了表格内部的数据。

const savedData = workbook.save();

5、完整代码（可以直接复制为组件）

<template>
  <div ref="container" class="univer-container"></div>
</template>

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

import { Univer } from "@univerjs/core";
import { defaultTheme } from "@univerjs/design";
import { UniverDocsPlugin } from "@univerjs/docs";
import { UniverDocsUIPlugin } from "@univerjs/docs-ui";
import { UniverFormulaEnginePlugin } from "@univerjs/engine-formula";
import { UniverRenderEnginePlugin } from "@univerjs/engine-render";
import { UniverSheetsPlugin } from "@univerjs/sheets";
import { UniverSheetsFormulaPlugin } from "@univerjs/sheets-formula";
import { UniverSheetsUIPlugin } from "@univerjs/sheets-ui";
import { UniverUIPlugin } from "@univerjs/ui";
import { onBeforeUnmount, onMounted, ref } from "vue";
import { IWorkbookData } from "@univerjs/core";

const data: IWorkbookData = {};

const univer = ref(null);
const workbook = ref(null);
const container = ref(null);

onMounted(() => {
  init(data);
});

onBeforeUnmount(() => {
  destroyUniver();
});

/**
 * Initialize univer instance and workbook instance
 * @param data {IWorkbookData} document see https://univer.work/api/core/interfaces/IWorkbookData.html
 */
const init = (data = {}) => {
  const univer = new Univer({
    theme: defaultTheme,
  });
  univer.value = univer;


  // core plugins
  univer.registerPlugin(UniverRenderEnginePlugin);
  univer.registerPlugin(UniverFormulaEnginePlugin);
  univer.registerPlugin(UniverUIPlugin, {
    container: container.value,
    header: true,
    toolbar: true,
    footer: true,
  });

  // doc plugins
  univer.registerPlugin(UniverDocsPlugin, {
    hasScroll: false,
  });
  univer.registerPlugin(UniverDocsUIPlugin);

  // sheet plugins
  univer.registerPlugin(UniverSheetsPlugin);
  univer.registerPlugin(UniverSheetsUIPlugin);
  univer.registerPlugin(UniverSheetsFormulaPlugin);

  // create workbook instance
  workbook.value = univer.createUniverSheet(data);
};

/**
 * Destroy univer instance and workbook instance
 */
const destroyUniver = () => {
  univer.value?.dispose();
  univer.value = null;
  workbook.value = null;
};

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.univer-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Also hide the menubar */
:global(.univer-menubar) {
  display: none;
}
</style>