一、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. 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、在页面中引入对应的文件

1. <script setup>
   
2. import "@univerjs/design/lib/index.css";
   
3. import "@univerjs/ui/lib/index.css";
   
4. import "@univerjs/sheets-ui/lib/index.css";
   
5. import "@univerjs/sheets-formula/lib/index.css";
   
6. 
   
7. import { Univer } from "@univerjs/core";
   
8. import { defaultTheme } from "@univerjs/design";
   
9. import { UniverDocsPlugin } from "@univerjs/docs";
   
10. import { UniverDocsUIPlugin } from "@univerjs/docs-ui";
    
11. import { UniverFormulaEnginePlugin } from "@univerjs/engine-formula";
    
12. import { UniverRenderEnginePlugin } from "@univerjs/engine-render";
    
13. import { UniverSheetsPlugin } from "@univerjs/sheets";
    
14. import { UniverSheetsFormulaPlugin } from "@univerjs/sheets-formula";
    
15. import { UniverSheetsUIPlugin } from "@univerjs/sheets-ui";
    
16. import { UniverUIPlugin } from "@univerjs/ui";
    
17. import { onBeforeUnmount, onMounted, ref } from "vue";
    
18. </script>

复制代码

2、创建一个 Univer 实例，并注册这些插件

1. <script setup>
   
2. const univer = ref(null);
   
3. const container = ref(null);
   
4. const univer = new Univer({
   
5.     theme: defaultTheme,
   
6.   });
   
7.   univer.value = univer;
   
8. 
   
9.   // core plugins
   
10.   univer.registerPlugin(UniverRenderEnginePlugin);
    
11.   univer.registerPlugin(UniverFormulaEnginePlugin);
    
12.   univer.registerPlugin(UniverUIPlugin, {
    
13.     container: container.value,//注意！！！container为需要展示图标的容器的ref
    
14.     header: true,
    
15.     toolbar: true,
    
16.     footer: true,
    
17.   });
    
18. 
    
19.   // doc plugins
    
20.   univer.registerPlugin(UniverDocsPlugin, {
    
21.     hasScroll: false,
    
22.   });
    
23.   univer.registerPlugin(UniverDocsUIPlugin);
    
24. 
    
25.   // sheet plugins
    
26.   univer.registerPlugin(UniverSheetsPlugin);
    
27.   univer.registerPlugin(UniverSheetsUIPlugin);
    
28.   univer.registerPlugin(UniverSheetsFormulaPlugin);
    
29. </script>

复制代码

3、创建一个空白的 Univer Sheet

1. univer.createUniverSheet({});

复制代码

4、加载数据与存储


加载

通过调用

1. Univer

复制代码

的

1. createUniverSheet

复制代码

方法，可以创建一个新的

1. Workbook

复制代码

实例。方法的第一个参数是一个对象，包含了

1. Workbook

复制代码

的数据，应该符合

1. IWorkbookData

复制代码

接口。

1. import { IWorkbookData } from "@univerjs/core";
   
2. 
   
3. // ... create univer instance and load plugins
   
4. 
   
5. const data: IWorkbookData = {};
   
6. const workbook = univer.createUniverSheet(data);

复制代码

存储

通过调用

1. Workbook

复制代码

的

1. save

复制代码

方法，可以得到

1. IWorkbookData

复制代码

对象，包含了表格内部的数据。

1. const savedData = workbook.save();

复制代码

5、完整代码（可以直接复制为组件）

1. <template>
   
2.   <div ref="container" class="univer-container"></div>
   
3. </template>
   
4. 
   
5. <script setup>
   
6. import "@univerjs/design/lib/index.css";
   
7. import "@univerjs/ui/lib/index.css";
   
8. import "@univerjs/sheets-ui/lib/index.css";
   
9. import "@univerjs/sheets-formula/lib/index.css";
   
10. 
    
11. import { Univer } from "@univerjs/core";
    
12. import { defaultTheme } from "@univerjs/design";
    
13. import { UniverDocsPlugin } from "@univerjs/docs";
    
14. import { UniverDocsUIPlugin } from "@univerjs/docs-ui";
    
15. import { UniverFormulaEnginePlugin } from "@univerjs/engine-formula";
    
16. import { UniverRenderEnginePlugin } from "@univerjs/engine-render";
    
17. import { UniverSheetsPlugin } from "@univerjs/sheets";
    
18. import { UniverSheetsFormulaPlugin } from "@univerjs/sheets-formula";
    
19. import { UniverSheetsUIPlugin } from "@univerjs/sheets-ui";
    
20. import { UniverUIPlugin } from "@univerjs/ui";
    
21. import { onBeforeUnmount, onMounted, ref } from "vue";
    
22. import { IWorkbookData } from "@univerjs/core";
    
23. 
    
24. const data: IWorkbookData = {};
    
25. 
    
26. const univer = ref(null);
    
27. const workbook = ref(null);
    
28. const container = ref(null);
    
29. 
    
30. onMounted(() => {
    
31.   init(data);
    
32. });
    
33. 
    
34. onBeforeUnmount(() => {
    
35.   destroyUniver();
    
36. });
    
37. 
    
38. /**
    
39. * Initialize univer instance and workbook instance
    
40. * @param data {IWorkbookData} document see https://univer.work/api/core/interfaces/IWorkbookData.html
    
41. */
    
42. const init = (data = {}) => {
    
43.   const univer = new Univer({
    
44.     theme: defaultTheme,
    
45.   });
    
46.   univer.value = univer;
    
47. 
    
48. 
    
49.   // core plugins
    
50.   univer.registerPlugin(UniverRenderEnginePlugin);
    
51.   univer.registerPlugin(UniverFormulaEnginePlugin);
    
52.   univer.registerPlugin(UniverUIPlugin, {
    
53.     container: container.value,
    
54.     header: true,
    
55.     toolbar: true,
    
56.     footer: true,
    
57.   });
    
58. 
    
59.   // doc plugins
    
60.   univer.registerPlugin(UniverDocsPlugin, {
    
61.     hasScroll: false,
    
62.   });
    
63.   univer.registerPlugin(UniverDocsUIPlugin);
    
64. 
    
65.   // sheet plugins
    
66.   univer.registerPlugin(UniverSheetsPlugin);
    
67.   univer.registerPlugin(UniverSheetsUIPlugin);
    
68.   univer.registerPlugin(UniverSheetsFormulaPlugin);
    
69. 
    
70.   // create workbook instance
    
71.   workbook.value = univer.createUniverSheet(data);
    
72. };
    
73. 
    
74. /**
    
75. * Destroy univer instance and workbook instance
    
76. */
    
77. const destroyUniver = () => {
    
78.   univer.value?.dispose();
    
79.   univer.value = null;
    
80.   workbook.value = null;
    
81. };
    
82. 
    
83. </script>
    
84. 
    
85. <!-- Add "scoped" attribute to limit CSS to this component only -->
    
86. <style scoped>
    
87. .univer-container {
    
88.   width: 100%;
    
89.   height: 100%;
    
90.   overflow: hidden;
    
91. }
    
92. 
    
93. /* Also hide the menubar */
    
94. :global(.univer-menubar) {
    
95.   display: none;
    
96. }
    
97. </style>

复制代码

四、注意事项

Univer Docs无法直接使用

1. luckyExcel

复制代码

对Excel进行文件的解析，解析出的格式与Univer Docs需要传入的格式不同，需要自己进行格式的转换。使用Univer Docs进行二次开发更为便捷，具体使用情况可以根据个人的需求进行调整。
以上就是Vue3使用Univer Docs创建在线编辑Excel的示例代码的详细内容，更多关于Vue3 Univer Docs在线编辑Excel的资料请关注脚本之家其它相关文章！

来源：https://www.jb51.net/javascript/339450akz.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！