使用luckysheet在线处理复杂表格

一、luckysheet 和 univer 对比

luckysheet已经停止维护，univer 是luckysheet的后续更新版本，通过导入含有复杂计算公式的Excel发现，univer对复杂计算显示错误，有可能将该功能加入到了收费版本univer pro。故选择luckysheet来实现。

二、luckysheet引入

官网给出两种引入方式

CDN方式

ini 复制代码

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/plugins.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/css/luckysheet.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/assets/iconfont/iconfont.css' />
<script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/luckysheet.umd.js"></script>

npm run build后dist文件夹下的所有文件复制到项目目录，然后通过相对路径引入

ini 复制代码

<link rel='stylesheet' href='./plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='./plugins/plugins.css' />
<link rel='stylesheet' href='./css/luckysheet.css' />
<link rel='stylesheet' href='./assets/iconfont/iconfont.css' />
<script src="./plugins/js/plugin.js"></script>
<script src="./luckysheet.umd.js"></script>

CDN方式在打包部署到离线环境后无法使用，故选择本地引入。

实现本地引入比较坎坷，遇到问题记录如下：

将luckysheet包存放在 public/luckysheet路径

xml 复制代码

<head>

<meta charset="UTF-8" />

<link rel="icon" href="/favicon.ico" />

<!-- 在这里全局引入luckysheet的样式文件和js文件 -->

<link rel="stylesheet" href="/public/luckysheet/plugins/css/pluginsCss.css" />

<link rel="stylesheet"  href="/public/luckysheet/plugins/plugins.css" />

<link rel="stylesheet" href="/public/luckysheet/css/luckysheet.css" />

<link  rel="stylesheet"  href="/public/luckysheet/assets/iconfont/iconfont.css" />

<script src="/public/luckysheet/plugins/js/plugin.js"></script>

<script src="/public/luckysheet/luckysheet.umd.js"></script>

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Miou</title>

</head>

报错：

查询发现是因为引入了不匹配的构建产物：Luckysheet 的 plugin.js 是 ESM（里面有 import），但你用普通

但是本地文件中并没有这一行。

发现这行代码中出现vite字样，应该是vit构建项目时加上去的，应该是与vite的预构建有关系，随后修改vit.config.ts文件，但是并没有解决。

尝试在vue文件中直接引入luckysheet

import luckysheet from 'luckysheet'

又报错 <math xmlns="http://www.w3.org/1998/Math/MathML"> 没有定义，导入 j Q u e r y 定义没有定义，导入jQuery定义 </math>没有定义，导入jQuery定义后又报错 $(...).mousewheel is not a function, 因为luckysheet中引入了jQurey，代码中又引入了一次导致插件没有挂到正确的 jQuery 实例上，折腾了半天各种矛盾遂放弃。

鬼使神差得成功了

考虑到

ini 复制代码

    <link rel="stylesheet" href="/luckysheet/plugins/css/pluginsCss.css" />
    <link rel="stylesheet" href="/luckysheet/plugins/plugins.css" />
    <link rel="stylesheet" href="/luckysheet/css/luckysheet.css" />
    <link rel="stylesheet" href="/luckysheet/assets/iconfont/iconfont.css" />
    <script type="text/javascript" src="/luckysheet/plugins/js/plugin.js"></script>
    <script type="text/javascript" src="/luckysheet/luckysheet.umd.js"></script>

复盘

根据 Vite 官方文档：

放置在 public 目录中的资源应该使用根绝对路径引用
例如：public/icon.png 应该在源码中引用为 /icon.png
public 中的资源不会被处理，只是直接复制到打包目录
保持开发和生产环境的一致性

虽然这是一个过时的库，但是完全开源，Excel中复杂计算也可以实现，严重怀疑改为univer就是为了收费。

出自基本功不踏实的一些碎碎念，完毕。