React引入Luckysheet以及使用心得

最新推荐文章于 2025-11-22 14:33:26 发布

原创最新推荐文章于 2025-11-22 14:33:26 发布 · 6.3k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

文章介绍了如何在基于AntDesignPro的React项目中引入和使用Luckysheet，一个轻量级的前端表格组件。首先，通过CDN或本地引入Luckysheet的相关CSS和JS文件。其次，创建表格容器，并在组件挂载后调用Luckysheet的create方法。最后，演示了如何配置表格选项和进行数据回显、保存、导出与导入的操作。

首先说明一下搭建环境

使用的框架为 Ant Design Pro ，最一开始的想法是直接用框架自带的可编辑表格实现功能，但是发现字段变多之后非常卡，无法解决。
在一个偶然的机会下了解到了Luckysheet，Luckysheet是一个纯前端且轻量化的表格组件，发现比较适合业务需要，所以开始尝试引入。

第一步、引入

Luckysheet官方文档地址

引入的一开始，在官网查看的时候，发现写的，就是在项目的index.html里面直接引入Luckysheet的css、js即可。自己刚开始接触React，并不太了解框架，然后我发现， Ant Design Pro 框架中并没有发现对应的index.html。

在 Ant Design Pro 查看文档的时候发现 Ant Design Pro 使用 Umi 作为开发工具，官方建议先查看 Umi 的常见问题，然后找到了HTML模板。新建 src/pages/document.ejs，umi 约定如果这个文件存在，会作为默认模板。
到这里开始引入，引入分为两种方式CDN和本地引入。

CDN


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

本地引入

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


<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>

我这里选择了本地引入，因为项目涉及到一些内网使用的环境，并且后期我们根据需求对源码进行了部分修改。
后来发现好像还可以以插件的方式安装，这个后面再去看吧。

第二步、指定表格容器，创建表格


import React from 'react'
class Luckysheet extends React.Component {

    componentDidMount() {
        const luckysheet = window.luckysheet
        luckysheet.create({
            container: "luckysheet",
        });
    }
    render() {
        const luckyCss = {
            margin: '0px',
            padding: '0px',
            position: 'absolute',
            width: '100%',
            height: '100%',
            left: '0px',
            top: '0px'
        }
        return (
            <div id="luckysheet" style={luckyCss} ></div>
        )
    }
}

export default Luckysheet

第三步、引用组件


import React from 'react'
import './App.css'
import Luckysheet from './component/Luckysheet'

function App() {
  return (
    <div className="App">
      <header className="App-header">
          <Luckysheet/>
      </header>
    </div>
  );
}

export default App

后面这两步也是官方给示例。

开始使用

一些配置项

关于luckysheet.create(options)中的一些属性意义：


            const options = {
                container: "luckysheet",
                // allowCopy: false, // 是否允许拷贝
                showtoolbar: false, // 是否显示工具栏
                showinfobar: false, // 是否显示顶部信息栏
                // showsheetbar: false, // 是否显示底部sheet页按钮
                // showstatisticBar: false, // 是否显示底部计数栏
                // sheetBottomConfig: false, // sheet页下方的添加行按钮和回到顶部按钮配置
                // allowEdit: false, // 是否允许前台编辑
                enableAddRow: false, // 允许增加行
                enableAddCol: false, // 允许增加列
                // userInfo: false, // 右上角的用户信息展示样式
                // showRowBar: false, // 是否显示行号区域
                // showColumnBar: false, // 是否显示列号区域
                // sheetFormulaBar: false, // 是否显示公式栏
                enableAddBackTop: false, // 返回头部按钮
                // rowHeaderWidth: 0, // 纵坐标
                // columnHeaderHeight: 0, // 横坐标
                // showstatisticBarConfig: {
                //     count:false,
                //     view:false,
                //     zoom:false,
                // },
                // showsheetbarConfig: {
                //     add: false, // 新增sheet
                //     menu: false, // sheet管理菜单
                //     sheet: false, // sheet页显示
                // },
                lang: "zh", // 设定表格语言 国际化设置，允许设置表格的语言，支持中文("zh")和英文("en")
                data: [sheet0, sheet1, sheet2], // data里面放的是每一个sheet页的数据 js 或者 json
                hook:{
                	// 钩子函数有很多，具体可以自己去查看，简单放一个举例
                    // 单元格点击事件
					cellMousedownBefore:function(cell,postion,sheetFile,ctx){
						// console.log(postion);
					},
                }
            }

文件中的一个sheet的数据luckysheetfile[0]的结构如下：


{
	"name": "Cell", //工作表名称
	"color": "", //工作表颜色
	"index": "0", //工作表索引
	"status": "1", //激活状态
	"order": "0", //工作表的顺序
	"hide": 0,//是否隐藏
	"row": 100, //行数
	"column": 100, //列数
	"config": {
		"merge":{}, //合并单元格
		"rowlen":{}, //表格行高
		"columnlen":{}, //表格列宽
		"rowhidden":{}, //隐藏行
		"colhidden":{}, //隐藏列
		"borderInfo":{}, //边框
	},
	"celldata": [], //初始化使用的单元格数据
	"data": [], //更新和存储使用的单元格数据
	"scrollLeft": 0, //左右滚动条位置
	"scrollTop": 315, //上下滚动条位置
	"luckysheet_select_save": [], //选中的区域
	"luckysheet_conditionformat_save": {},//条件格式
	"calcChain": [],//公式链
	"isPivotTable":false,//是否数据透视表
	"pivotTable":{},//数据透视表设置
	"filter_select": {},//筛选范围
	"filter": null,//筛选配置
	"luckysheet_alternateformat_save": [], //交替颜色
	"luckysheet_alternateformat_save_modelCustom": [], //自定义交替颜色	
	"freezen": {}, //冻结行列
	"chart": [], //图表配置
	"visibledatarow": [], //所有行的位置
	"visibledatacolumn": [], //所有列的位置
	"ch_width": 2322, //工作表区域的宽度
	"rh_height": 949, //工作表区域的高度
	"load": "1", //已加载过此sheet的标识
}

具体可以去查看官网，这里只是复制一份。
ps:这里要注意的是属性很多，在你上面自定义修改的时候，相同属性会覆盖上面的内容，建议从在下面加

数据回显

loadUrl ,我没用过,当时感觉不太适合我们的要求。
作用：配置loadUrl接口地址，加载所有工作表的配置，并包含当前页单元格数据，与loadSheetUrl配合使用。参数为gridKey（表格主键）。


$.post(loadurl, {"gridKey" : server.gridKey}, function (d) {})

setCellValue 在前端把数据遍历放入到表格中，可以用而且蛮好用的，但是数据多了比较慢。
后台处理数据，直接生成 cellData，前台sheet.cellData.push(...list)，这个用起来速度快了一些，现在用的这个，暂时没有找到更好的办法。

数据保存

没啥好说的，得根据真实业务场景去处理，这里直接获取sheet页数据，然后遍历获取值v（或者m）
原始值 v 和显示值m区别：
假如原始值 v 为1，设置成百分比格式m就是100%，设置成两位小数数字m就是1.00
window.luckysheet.getSheet(index).data

导出与导入

这个根据官网常见问题中给的参考链接搞就可以。当时应该参考的这个。
使用exceljs导出luckysheet表格

从这开始想到啥说啥吧，虽然本来写的就不多。

关于数据定位

有个api，scroll([setting])

scroll([setting])
参数：
{PlainObject} [setting]: 可选参数
{Number} [scrollLeft]：横向滚动值。默认为当前横向滚动位置。
{Number} [scrollTop]：纵向滚动值。默认为当前纵向滚动位置。
{Number} [targetRow]：纵向滚动到指定的行号。默认为当前纵向滚动位置。
{Number} [targetColumn]：横向滚动到指定的列号。默认为当前横向滚动位置。
{Function} [success]: 表格刷新成功后的回调函数

说明：
滚动当前工作表位置

示例：
把数据显示在靠近屏幕中间的位置，直接写 i 会在第一行，同样的也可以设置其他属性。
luckysheet.scroll({ targetRow: i - 6 }) 
有个bug，如果为了突出换背景色，会去不掉，暂时还没解决。