脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue3 Univer Docs在线编辑Excel

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

 更新时间：2025年04月11日 10:44:10   作者：VT.馒头  
本文介绍了如何在Vue3项目中集成UniverDocs,一个基于Luckysheet的企业文档与数据协同解决方案,指导了从安装到在页面中使用的步骤,以及注意事项,如数据格式转换和二次开发的灵活性,需要的朋友可以参考下

一、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>

四、注意事项

Univer Docs无法直接使用luckyExcel对Excel进行文件的解析，解析出的格式与Univer Docs需要传入的格式不同，需要自己进行格式的转换。使用Univer Docs进行二次开发更为便捷，具体使用情况可以根据个人的需求进行调整。

以上就是Vue3使用Univer Docs创建在线编辑Excel的示例代码的详细内容，更多关于Vue3 Univer Docs在线编辑Excel的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • Vue 事件的$event参数=事件的值案例

    Vue 事件的$event参数=事件的值案例

    这篇文章主要介绍了Vue 事件的$event参数=事件的值案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2021-01-01
  • vue使用反向代理解决跨域问题方案

    vue使用反向代理解决跨域问题方案

    这篇文章主要为大家介绍了vue使用反向代理解决跨域问题方案详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-01-01
  • Vue中使用和移除总线Bus的注意事项详解

    Vue中使用和移除总线Bus的注意事项详解

    Vue中的总线Bus是一种通信机制，可用于组件间的数据传递和事件触发。使用时需要注意Bus的命名和定义、监听和触发事件的方法、移除和销毁Bus的时机和方式等问题。合理使用总线Bus可以提高组件的复用性和可维护性，但过度依赖可能会导致代码耦合和难以维护
    2023-04-04
  • vue中如何实现拖拽调整顺序功能

    vue中如何实现拖拽调整顺序功能

    这篇文章主要介绍了vue中如何实现拖拽调整顺序功能问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-05-05
  • 安装@vue/cli报错npmERR gyp ERR问题及解决

    安装@vue/cli报错npmERR gyp ERR问题及解决

    这篇文章主要介绍了安装@vue/cli报错npmERR gyp ERR问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • vue使用计算属性完成动态滑竿条制作

    vue使用计算属性完成动态滑竿条制作

    这篇文章主要介绍了vue使用计算属性完成动态滑竿条制作，文章围绕计vue算属制作动态滑竿条的相关代码完成内容,需要的朋友可以参考一下
    2021-12-12
  • Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现

    Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现

    这篇文章主要介绍了Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-09-09
  • vue基于input实现密码的显示与隐藏功能

    vue基于input实现密码的显示与隐藏功能

    这篇文章主要介绍了vue基于input实现密码的显示与隐藏功能,文末给大家介绍了vue 如何实现切换密码的显示与隐藏效果，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下
    2022-01-01
  • 关于vite+vue3打包部署问题

    关于vite+vue3打包部署问题

    这篇文章主要介绍了关于vite+vue3打包部署问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • Vue中render函数调用时机与执行细节源码分析

    Vue中render函数调用时机与执行细节源码分析

    这篇文章主要为大家介绍了Vue中render函数调用时机与执行细节源码分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-10-10

最新评论