Vue3使用Univer Docs創(chuàng)建在線編輯Excel的示例代碼
更新時間：2025年04月11日 10:44:10 作者：VT.饅頭
本文介紹了如何在Vue3項目中集成UniverDocs,一個基于Luckysheet的企業(yè)文檔與數(shù)據(jù)協(xié)同解決方案,指導了從安裝到在頁面中使用的步驟,以及注意事項,如數(shù)據(jù)格式轉(zhuǎn)換和二次開發(fā)的靈活性,需要的朋友可以參考下
一、Univer Docs 簡介
Univer 是一套企業(yè)文檔與數(shù)據(jù)協(xié)同解決方案，包括電子表格、文檔和幻燈片三大文檔類型，高可擴展性設計使得開發(fā)者可以在 Univer 的基礎上定制個性化功能。
它的前身是Luckysheet ，Luckysheet 是一款純前端類似excel的在線表格，功能強大、配置簡單、完全開源。一款純前端類似excel的在線表格，功能強大、配置簡單、完全開源。
下面附上兩個版本的官網(wǎng)地址：
Luckysheet ：https://mengshukeji.gitee.io/LuckysheetDocs/zh/
Univer Docs ：https://univer.ai/guides/introduction/
二、安裝Univer
推薦使用 npm >= 8.0.0，以便自動安裝 peerDependencies。
//執(zhí)行下面的命令 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、創(chuàng)建一個 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、創(chuàng)建一個空白的 Univer Sheet
univer.createUniverSheet({});
4、加載數(shù)據(jù)與存儲
加載
通過調(diào)用 Univer 的 createUniverSheet 方法，可以創(chuàng)建一個新的 Workbook 實例。方法的第一個參數(shù)是一個對象，包含了 Workbook 的數(shù)據(jù)，應該符合 IWorkbookData 接口。
import { IWorkbookData } from "@univerjs/core";
// ... create univer instance and load plugins
const data: IWorkbookData = {};
const workbook = univer.createUniverSheet(data);
存儲
通過調(diào)用 Workbook 的 save 方法，可以得到 IWorkbookData 對象，包含了表格內(nèi)部的數(shù)據(jù)。
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需要傳入的格式不同，需要自己進行格式的轉(zhuǎn)換。使用Univer Docs進行二次開發(fā)更為便捷，具體使用情況可以根據(jù)個人的需求進行調(diào)整。
以上就是Vue3使用Univer Docs創(chuàng)建在線編輯Excel的示例代碼的詳細內(nèi)容，更多關于Vue3 Univer Docs在線編輯Excel的資料請關注腳本之家其它相關文章！
相關文章
vue?+?ele?實現(xiàn)下拉選擇框和下拉多選選擇框處理方案
這篇文章主要介紹了vue?+?ele?實現(xiàn)下拉選擇框和下拉多選選擇框處理方案,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08
Vue3兼容大部分Vue2的特性，用Vue2代碼開發(fā)Vue3都可以，性能上面打包大小減少 41%，初次渲染快 55%，更新快 133%，內(nèi)存使用減少 54%,本篇文章主要介紹Vue3的7種種組件通信,需要的朋友可以參考下面文章的具體內(nèi)容2021-09-09
這篇文章主要介紹了vue中環(huán)境變量的使用與配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Mock.js?是一個用于生成隨機數(shù)據(jù)和攔截?Ajax?請求的?JavaScript?庫,它非常適合在前端開發(fā)中模擬后端?API,尤其是在前后端分離的開發(fā)模式下,本文給大家介紹了如何在Vue2項目中使用Mock.js,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了vue接入騰訊防水墻代碼，代碼超級簡單，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-05-05
這篇文章主要給大家介紹了關于Vue圖片裁剪組件的相關資料,本文介紹的組件是基于vue-cropper二次封裝,vue-cropper大家應該都很熟悉了吧,需要的朋友可以參考下2021-07-07
vue mint-ui 實現(xiàn)省市區(qū)街道4級聯(lián)動示例(仿淘寶京東收貨地址4級聯(lián)動)
本篇文章主要介紹了vue mint-ui 實現(xiàn)省市區(qū)街道4級聯(lián)動（仿淘寶京東收貨地址4級聯(lián)動），非常具有實用價值，需要的朋友可以參考下2017-10-10
vue如何實現(xiàn)動態(tài)的選中狀態(tài)切換效果
這篇文章主要介紹了vue如何實現(xiàn)動態(tài)的選中狀態(tài)切換效果，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue和H5 draggable實現(xiàn)拖拽并替換效果
這篇文章主要為大家詳細介紹了vue和H5 draggable實現(xiàn)拖拽并替換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
這篇文章主要給大家介紹了關于vue中銷毀定時器的幾種解決方案,銷毀定時器的操作一般是在beforeDestroy鉤子中進行，根據(jù)定時器的數(shù)量不同可以有多種解決方法,需要的朋友可以參考下2023-08-08