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。
三、在页面中使用
1、在页面中引入对应的文件
2、创建一个 Univer 实例,并注册这些插件
3、创建一个空白的 Univer Sheet
4、加载数据与存储
加载
通过调用 Univer
的 createUniverSheet
方法,可以创建一个新的 Workbook
实例。方法的第一个参数是一个对象,包含了 Workbook
的数据,应该符合 IWorkbookData
接口。
存储
通过调用 Workbook
的 save
方法,可以得到 IWorkbookData
对象,包含了表格内部的数据。
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项目中通过LuckySheet实现Excel在线编辑功能
栏 目:JavaScript
本文标题:Vue3使用Univer Docs创建在线编辑Excel的示例代码
本文地址:https://fushidao.cc/wangluobiancheng/23710.html
您可能感兴趣的文章
- 07-21Webpack打包速度优化方案汇总
- 07-21Vuex Actions多参数传递的解决方案
- 07-21前端JavaScript数组方法总结(非常详细!)
- 07-21使用Node.js制作图片上传服务的详细教程
- 07-21vue3整合SpringSecurity加JWT实现权限校验
- 07-21vue3中pinia的使用及持久化的实现
- 07-21vue3整合SpringSecurity加JWT实现登录认证
- 07-21一文详解如何将Javascript打包成exe可执行文件
- 07-21JavaScript中if、else if、else和switch的语法、用法及注意事项
- 07-21Vue 3 中 vue-router 的 router.resolve () API详解


阅读排行
- 1Webpack打包速度优化方案汇总
- 2Vuex Actions多参数传递的解决方案
- 3前端JavaScript数组方法总结(非常详细!)
- 4使用Node.js制作图片上传服务的详细教程
- 5vue3整合SpringSecurity加JWT实现权限校验
- 6vue3中pinia的使用及持久化的实现
- 7vue3整合SpringSecurity加JWT实现登录认证
- 8一文详解如何将Javascript打包成exe可执行文件
- 9JavaScript中if、else if、else和switch的语法、用法及注意事项
- 10Vue 3 中 vue-router 的 router.resolve () API详解
推荐教程
- 04-23JavaScript Array实例方法flat的实现
- 04-23Vue3使用v-if指令进行条件渲染的实例代码
- 04-23THREE.JS使用TransformControls对模型拖拽的代码实例
- 07-21JavaScript判断数据类型的四种方式总结
- 04-23vue3+ts项目搭建的实现示例
- 07-21JavaScript检查变量类型的常用方法
- 07-21基于vue3与supabase系统认证机制详解
- 07-21JavaScript双问号操作符(??)的惊人用法总结大全
- 07-21JavaScript中if、else if、else和switch的语法、用法及注意事项
- 07-21Vue中使用vue-plugin-hiprint插件进行打印的功能实现