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