脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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 + ele 实现下拉选择框和下拉多选选择框处理方案

    vue + ele 实现下拉选择框和下拉多选选择框处理方案

    这篇文章主要介绍了vue + ele 实现下拉选择框和下拉多选选择框处理方案,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-08-08
  • Vue3的7种种组件通信详情

    Vue3的7种种组件通信详情

    Vue3兼容大部分Vue2的特性，用Vue2代码开发Vue3都可以，性能上面打包大小减少 41%，初次渲染快 55%，更新快 133%，内存使用减少 54%,本篇文章主要介绍Vue3的7种种组件通信,需要的朋友可以参考下面文章的具体内容
    2021-09-09
  • vue中环境变量的使用与配置讲解

    vue中环境变量的使用与配置讲解

    这篇文章主要介绍了vue中环境变量的使用与配置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • 在Vue2项目中使用Mock.js的详细教程

    在Vue2项目中使用Mock.js的详细教程

    Mock.js 是一个用于生成随机数据和拦截 Ajax 请求的 JavaScript 库,它非常适合在前端开发中模拟后端 API,尤其是在前后端分离的开发模式下,本文给大家介绍了如何在Vue2项目中使用Mock.js,需要的朋友可以参考下
    2024-10-10
  • vue接入腾讯防水墙代码

    vue接入腾讯防水墙代码

    这篇文章主要介绍了vue接入腾讯防水墙代码，代码超级简单，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-05-05
  • Vue图片裁剪组件实例代码

    Vue图片裁剪组件实例代码

    这篇文章主要给大家介绍了关于Vue图片裁剪组件的相关资料,本文介绍的组件是基于vue-cropper二次封装,vue-cropper大家应该都很熟悉了吧,需要的朋友可以参考下
    2021-07-07
  • vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)

    vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)

    本篇文章主要介绍了vue mint-ui 实现省市区街道4级联动（仿淘宝京东收货地址4级联动），非常具有实用价值，需要的朋友可以参考下
    2017-10-10
  • vue如何实现动态的选中状态切换效果

    vue如何实现动态的选中状态切换效果

    这篇文章主要介绍了vue如何实现动态的选中状态切换效果，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • vue和H5 draggable实现拖拽并替换效果

    vue和H5 draggable实现拖拽并替换效果

    这篇文章主要为大家详细介绍了vue和H5 draggable实现拖拽并替换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-07-07
  • vue中销毁定时器的几种解决方案

    vue中销毁定时器的几种解决方案

    这篇文章主要给大家介绍了关于vue中销毁定时器的几种解决方案,销毁定时器的操作一般是在beforeDestroy钩子中进行，根据定时器的数量不同可以有多种解决方法,需要的朋友可以参考下
    2023-08-08

最新评论