vue3 使用 Univer Sheets 电子表格组件

背景

部门要进行在线数据填报：excel表格样式不限;
因为要支持直接从excel直接粘贴，经筛选选择：Univer Sheets

Univer Sheets 官网地址
https://docs.univer.ai/zh-CN/guides/sheets

1、安装和配置

# 安装核心包
pnpm add @univerjs/presets

正常到这就可以了，但是我这边前台报react版本错误，所以去源码包看了一下版本，单独指定react的版本（如下图）

# 指定依赖的 react 
pnpm add [email protected] [email protected] -D
# 最后的版本情况
{
  "dependencies": {
    "@univerjs/presets": "^0.8.2",
  },
  "devDependencies": {
    "react": "18.2.0",
    "react-dom": "18.2.0",
  }
}

注意：若指定了react的版本前台还报错，则修改 vite.config.js，指定 react 的路径，如下在 resolve 新增 react react-dom 的路径

#  vite.config.js
import {resolve} from 'path'

export default defineConfig(({command, mode}) => {
    const envConfig = loadEnv(mode, './')
    return {
        server: {
            .....
        },
        plugins: [
            ......
        ],
        resolve: {
            alias: {
                '~': `${resolve(__dirname, './')}`,
                '@': `${resolve(__dirname, 'src')}/`,
                react: resolve('./node_modules/react'),
                'react-dom': resolve('./node_modules/react-dom')
            },
        },
    }
});

若不指定路径，前端会报警告：

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

2 编写基本样例功能

1）数据存储到浏览器缓存，再次打开加载缓存中的表格数据
2）启用、禁用表格编辑
UI按钮模板是element-plus

3、效果及评价

1）样式比较好，权限控制精细，未深入研究
2）测试的项目：打包从26M 变成36M，整个包新增相关较大
3）官方有按模块引用，这里没做精简引用，欢迎您测试，并留下评价
预览效果如下图