Vue3使用Univer Docs創(chuàng)建在線編輯Excel的示例代碼
更新時間：2025年04月11日 10:44:10 作者：VT.饅頭
本文介紹了如何在Vue3項目中集成UniverDocs,一個基于Luckysheet的企業(yè)文檔與數(shù)據(jù)協(xié)同解決方案,指導(dǎo)了從安裝到在頁面中使用的步驟,以及注意事項,如數(shù)據(jù)格式轉(zhuǎn)換和二次開發(fā)的靈活性,需要的朋友可以參考下
一、Univer Docs 簡介
Univer 是一套企業(yè)文檔與數(shù)據(jù)協(xié)同解決方案，包括電子表格、文檔和幻燈片三大文檔類型，高可擴展性設(shè)計使得開發(fā)者可以在 Univer 的基礎(chǔ)上定制個性化功能。
它的前身是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、在頁面中引入對應(yīng)的文件
<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為需要展示圖標(biāo)的容器的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ù)，應(yīng)該符合 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、完整代碼（可以直接復(fù)制為組件）
<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的示例代碼的詳細(xì)內(nèi)容，更多關(guān)于Vue3 Univer Docs在線編輯Excel的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了Vue 事件的$event參數(shù)=事件的值案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2021-01-01
這篇文章主要為大家介紹了vue使用反向代理解決跨域問題方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
Vue中的總線Bus是一種通信機制，可用于組件間的數(shù)據(jù)傳遞和事件觸發(fā)。使用時需要注意Bus的命名和定義、監(jiān)聽和觸發(fā)事件的方法、移除和銷毀Bus的時機和方式等問題。合理使用總線Bus可以提高組件的復(fù)用性和可維護性，但過度依賴可能會導(dǎo)致代碼耦合和難以維護2023-04-04
這篇文章主要介紹了vue中如何實現(xiàn)拖拽調(diào)整順序功能問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
安裝@vue/cli報錯npmERR gyp ERR問題及解決
這篇文章主要介紹了安裝@vue/cli報錯npmERR gyp ERR問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue使用計算屬性完成動態(tài)滑竿條制作，文章圍繞計vue算屬制作動態(tài)滑竿條的相關(guān)代碼完成內(nèi)容,需要的朋友可以參考一下2021-12-12
Vue利用localStorage本地緩存使頁面刷新驗證碼不清零功能的實現(xiàn)
這篇文章主要介紹了Vue利用localStorage本地緩存使頁面刷新驗證碼不清零功能的實現(xiàn)，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-09-09
這篇文章主要介紹了vue基于input實現(xiàn)密碼的顯示與隱藏功能,文末給大家介紹了vue?如何實現(xiàn)切換密碼的顯示與隱藏效果，本文通過實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-01-01
這篇文章主要介紹了關(guān)于vite+vue3打包部署問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
Vue中render函數(shù)調(diào)用時機與執(zhí)行細(xì)節(jié)源碼分析
這篇文章主要為大家介紹了Vue中render函數(shù)調(diào)用時機與執(zhí)行細(xì)節(jié)源碼分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10