vue3+TS+univer实现在线表格

一、univer简介

univer的前身是lunckysheet，Univer 提供了一个全面的企业级文档与数据协同的解决方案，支持电子表格、文本文档和演示幻灯片三大核心文档类型。通过灵活的 API 和插件机制，开发者可以在 Univer 的基础上进行个性化功能的定制和扩展，以适应不同用户在不同场景下的特定需求。

lunckysheet：Luckysheet 已不再维护，推荐使用 Univer 替代 | Luckysheet文档

univer：Introduction – Univer

二、安装与引入

注意：确保使用的版本为 npm@7 及以上、 pnpm@8 及以上，如果你正在使用 pnpm@6 ~ pnpm@7，可以尝试配置 auto-install-peers=true 2来解决依赖安装问题

下面我会以npm为例：

1、安装核心插件以及基本的插件 如果需要其他的功能可以详细研究其他的插件的引入与使用哦

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

2、你需要在项目中引入 Univer 的样式文件，以及一些必要的插件（样式文件的引入顺序很重要，确保你在依次引入 @univerjs/design、@univerjs/ui 的 CSS 样式后再引入其他插件的样式文件。）

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 { Univer } 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";

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

const univer = new Univer({
  theme: defaultTheme,
});
 
univer.registerPlugin(UniverRenderEnginePlugin);
univer.registerPlugin(UniverFormulaEnginePlugin);
 
univer.registerPlugin(UniverUIPlugin, {
  container: 'app',
});
 
univer.registerPlugin(UniverDocsPlugin, {
  hasScroll: false,
});
univer.registerPlugin(UniverDocsUIPlugin);
 
univer.registerPlugin(UniverSheetsPlugin);
univer.registerPlugin(UniverSheetsUIPlugin);
univer.registerPlugin(UniverSheetsFormulaPlugin);
 
univer.createUnit(UniverInstanceType.UNIVER_SHEET, {}); // {}可以是你得数据 初始化的时看你的需要是否需要加载数据

三、加载和保存数据

1、加载数据

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

import { IWorkbookData, UniverInstanceType } from "@univerjs/core";
 
const data: IWorkbookData = {};
const workbook = univer.createUnit(UniverInstanceType.UNIVER_SHEET, {});

2、保存数据

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

@univerjs/facade 提供的 API 是对 Univer 实例的封装，因此你需要在创建了 Univer 实例之后，再用 FUniver 包裹这个实例：

import { FUniver } from "@univerjs/facade";
 
const univerAPI = FUniver.newAPI(univer);

然后你就可以通过调用 univerAPI 的方法来使用 Univer 了

const savedData = univerAPI.getActiveWorkbook().getSnapshot();

四、vue3中的使用

<template>
  <button @click="getSheetData()">获取数据</button>
  <!-- 表格 -->
  <div ref="container" class="univer-container" />
</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 { Univer, UniverInstanceType, Workbook, LocaleType, Tools } 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 { FUniver } from '@univerjs/facade'
// import '@univerjs/find-replace/lib/index.css';

// import { UniverFindReplacePlugin } from '@univerjs/find-replace';
// import { UniverSheetsFindReplacePlugin } from '@univerjs/sheets-find-replace';

import DesignZhCN from '@univerjs/design/lib/locale/zh-CN'
import UIZhCN from '@univerjs/ui/lib/locale/zh-CN'
import DocsUIZhCN from '@univerjs/docs-ui/lib/locale/zh-CN'
import SheetsZhCN from '@univerjs/sheets/lib/locale/zh-CN'
import SheetsUIZhCN from '@univerjs/sheets-ui/lib/locale/zh-CN'

const { data } = defineProps({
  // workbook data
  data: {
    type: Object,
    default: () => ({})
  }
})

const univerRef = ref<Univer | null>(null)
const container = ref<HTMLElement | null>(null)

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

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

  // core plugins
  univer.registerPlugin(UniverRenderEnginePlugin)
  univer.registerPlugin(UniverFormulaEnginePlugin)
  univer.registerPlugin(UniverUIPlugin, {
    container: container.value!
  })

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

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

  // create workbook instance
 univer.createUnit(UniverInstanceType.UNIVER_SHEET, {})
}

const getSheetData = () => {
  const univerAPI = FUniver.newAPI(univerRef.value)
  const savedData = univerAPI.getActiveWorkbook().getSnapshot()
  console.log('savedData', savedData)
}
</script>

<style scoped></style>