关于Univer Sheet在线电子表格

@菜菜_达

于 2025-02-26 14:40:15 发布

阅读量1.2k

点赞数 5

文章标签：前端 jquery

本文链接：https://blog.csdn.net/2403_86878632/article/details/145877340

版权

univer官方文档关于方法的使用介绍的较为简洁，大部分需自己进行测试，学习成本比较高，在这里我将为大家进行简单的梳理，以及结合项目需要使用的方法总结。

官网地址

安装及引入

1.vue安装

vue安装的前提是本机已经安装及配置好node.js，其中包含的npm支持vue3的安装命令，目前vue3支持的npm版本在v12.x以上，若版本过低则会报错，导致无法安装相关的插件包。

univer集成了一个presets插件包，其中涵盖了电子表格较为基础的使用工具，但不包含查找&替换、筛选等工具。

Presets安装命令：

 npm install @univerjs/presets

项目引用及创建表格：

import { createUniver, defaultTheme, LocaleType, merge } from '@univerjs/presets';
import { UniverSheetsCorePreset } from '@univerjs/presets/preset-sheets-core';
import UniverPresetSheetsCoreZhCN from '@univerjs/presets/preset-sheets-core/locales/zh-CN';
  
import '@univerjs/presets/lib/styles/preset-sheets-core.css';

const { univer, univerAPI } = createUniver({
locale: LocaleType.ZH_CN,
  locales: {
     [LocaleType.ZH_CN]: merge(
       {},
       UniverPresetSheetsCoreZhCN,// 中文包
     ),
   },
   theme: defaultTheme, // 默认主题
   presets: [
     UniverSheetsCorePreset({
       container: 'app',// 容器id
     }),
   ],
});
  
univerAPI.createWorkbook({ name: 'Test Sheet' });

其中univerAPI可用来调用表格现有的api,例如获取单元格范围的方法：

const sheet = univerAPI.getActiveWorkbook().getActiveSheet();
  
// 获取 A1 单元格的范围：
const range = sheet.getRange(0, 0, 1, 1);
console.log(range)

除了使用presets集成的插件包，还有一种是手动组合安装插件，这样安装方式可以更加灵活地控制插件的加载时机

安装命令：

npm install @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui...

引入及创建：

 import "./style.css";
 
 import { LocaleType, Univer, UniverInstanceType } 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 DesignZhCN from '@univerjs/design/locale/zh-CN';
 import UIZhCN from '@univerjs/ui/locale/zh-CN';
 import DocsUIZhCN from '@univerjs/docs-ui/locale/zh-CN';
 import SheetsZhCN from '@univerjs/sheets/locale/zh-CN';
 import SheetsUIZhCN from '@univerjs/sheets-ui/locale/zh-CN'
 ...
 // 注意Facade API需要引入，否则无法调用其方法
 import { FUniver } from "@univerjs/facade";
 
 // 创建表格
 const univer = new Univer({
   theme: defaultTheme,
   locale: LocaleType.ZH_CN,
   locales: {
     [LocaleType.ZH_CN]: merge( //对应插件的中文语言包
       {},
       DesignZhCN,
       UIZhCN,
       DocsUIZhCN,
       SheetsZhCN,
       SheetsUIZhCN,
     ),
   },
 });
 // 注册插件，若不进行注册 无法使用该插件
 univer.registerPlugin(UniverRenderEnginePlugin);
 univer.registerPlugin(UniverFormulaEnginePlugin);
  
 univer.registerPlugin(UniverUIPlugin, {
   container: 'app',
 });
 univer.createUnit(UniverInstanceType.UNIVER_SHEET, {});
  
 const univerAPI = FUniver.newAPI(univer);

2.script标签引入

Univer 也为每个插件都提供了 UMD 包，但与之不同的是，你需要手动引入每个插件的 UMD 包。这个过程比较繁琐，并不推荐使用这种方式

引入示例：

 <script src="https://unpkg.com/@univerjs/protocol/lib/umd/index.js"></script>
 <script src="https://unpkg.com/@univerjs/core/lib/umd/index.js"></script>
 <script src="https://unpkg.com/@univerjs/telemetry/lib/umd/index.js"></script>
 <script src="https://unpkg.com/@univerjs/rpc/lib/umd/index.js"></script>
 <script src="https://unpkg.com/@univerjs/design/lib/umd/index.js"></script>
 <script src="https://unpkg.com/@univerjs/engine-render/lib/umd/index.js"></script>
 <script src="https://unpkg.com/@univerjs/engine-numfmt/lib/umd/index.js"></script>
 <script src="https://unpkg.com/@univerjs/engine-formula/lib/umd/index.js"></script>
 <script src="https://unpkg.com/@univerjs/drawing/lib/umd/index.js"></script>
 
 <script src="https://unpkg.com/@univerjs/core/lib/umd/facade.js"></script>
 <script src="https://unpkg.com/@univerjs/ui/lib/umd/index.js"></script>
 <script src="https://unpkg.com/@univerjs/docs/lib/umd/index.js"></script>
   ...
   
  // js代码
 const { Univer, LocaleType, merge, UniverInstanceType } = UniverCore
 const { FUniver } = UniverCoreFacade
 const { defaultTheme } = UniverDesign
 const { UniverRenderEnginePlugin } = UniverEngineRender
 const { UniverFormulaEnginePlugin } = UniverEngineFormula
 const { UniverUIPlugin } = UniverUi
 const { UniverSheetsPlugin } = UniverSheets
 const { UniverSheetsUIPlugin } = UniverSheetsUi
 const { UniverDocsPlugin } = UniverDocs
 const { UniverDocsUIPlugin } = UniverDocsUi
 const { UniverSheetsFormulaPlugin } = UniverSheetsFormula
 const { UniverSheetsFormulaUIPlugin } = UniverSheetsFormulaUi
 const { UniverSheetsNumfmtPlugin } = UniverSheetsNumfmt
 const { UniverSheetsNumfmtUIPlugin } = UniverSheetsNumfmtUi
 
 const univer = new Univer({
     theme: defaultTheme,
     locale: LocaleType.ZH_CN,
     locales: {
         [LocaleType.ZH_CN]: merge(
             {},
             UniverDesignZhCN,
             UniverUiZhCN,
             UniverSheetsZhCN,
             UniverSheetsUiZhCN,
             UniverDocsUiZhCN,
             UniverSheetsFormulaUiZhCN,
             UniverSheetsNumfmtUiZhCN
         ),
     },
 });
 
 univer.registerPlugin(UniverRenderEnginePlugin);
 univer.registerPlugin(UniverFormulaEnginePlugin);
 
 univer.registerPlugin(UniverUIPlugin, {
     container: 'app',
 });
 
 univer.registerPlugin(UniverSheetsPlugin);
 univer.registerPlugin(UniverSheetsUIPlugin);
 
 univer.registerPlugin(UniverDocsPlugin);
 univer.registerPlugin(UniverDocsUIPlugin);
 
 univer.registerPlugin(UniverSheetsFormulaPlugin);
 univer.registerPlugin(UniverSheetsFormulaUIPlugin);
 univer.registerPlugin(UniverSheetsNumfmtPlugin);
 univer.registerPlugin(UniverSheetsNumfmtUIPlugin);
 
 univer.createUnit(UniverInstanceType.UNIVER_SHEET, {});
 
 const univerAPI = FUniver.newAPI(univer);

1.单个插件按需引入弊端：有的插件语言包、css样式不全且引入的文件较多

中文语言包

可以一次性引入，包含基本插件所有中文语言包，下面是下载链接：

中文语言包下载链接

css文件

下载链接

js文件

包含基础功能的all.js，仅需引入一个文件就能实现基础的表格功能

下载链接

关于获取表格选取的方法

获得一个范围需要知道起始行号、起始列号、长宽。

 const sheet = univerAPI.getActiveWorkbook().getActiveSheet();
  
 // 获取 A1 单元格的范围：
 const range = sheet.getRange(0, 0, 1, 1);
  
 // 获取 A1:B2 的范围：
 const range2 = sheet.getRange(0, 0, 2, 2);

从 0.2.15 开始 getRange 支持用 A1 表示法获取范围，较为准确。(目前使用版本 v0.4.1)

 const sheet = univerAPI.getActiveWorkbook().getActiveSheet();
 // 获取名称是 Sheet1 的工作表的 A1:B2 范围
 const range1 = sheet.getRange('Sheet1!A1:B2');
 // 获取单个单元格 A1
 const range2 = sheet.getRange('A1');
 // 获取 A1:B2 范围
 const range3 = sheet.getRange('A1:B2');
 // 获取 A 列的范围
 const range4 = sheet.getRange('A:A');
 // 获取第 1 行的范围
 const range5 = sheet.getRange('1:1');

关于合并单元格

官方文档中并未提及合并单元格的具体方法，仅介绍了是否合并的布尔值获取，由此得到一些启发，尝试在该方法上找寻合并单元格的相关信息，不负所望，最终实现了渲染合并单元格的需求。

 const sheet = univerAPI.getActiveWorkbook().getActiveSheet();
  
 const range = sheet.getRange(0, 0, 2, 2);
 // 该方法返回 是否合并的布尔值
 const isMerged = range.isMerged();
 // 执行合并单元格,前提是取到正确的合并范围
 range.merge()

以上是我关于研究univer sheet所总结的内容，有不对之处还请多多指教。