免费的前端在线excle开源框架-luckysheet 配合java后台使用

最新推荐文章于 2025-10-11 18:38:38 发布

原创

最新推荐文章于 2025-10-11 18:38:38 发布 · 2.5k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #javascript #html

本文介绍了如何利用开源框架Luckysheet创建一个在线Excel，用于浏览和编辑公司数据，并详细展示了如何设置表格结构。同时，文章提到Luckysheet虽然功能强大且免费，但API文档不全，需要开发者自行探索。最后，作者预告将分享动态Excel创建及数据加载方法。

公司内部项目要做一个在线的excle，通过在线excle遍历公司数据，在excle修改数据之后同步到数据库，从网上找了很多方法，推荐给大家一个免费的在线excle编辑框架-luckysheet
优点：免费，白嫖的永远是最香的，功能强大，接近实际的excle
缺点：官方api不太全，好多东西都得自己摸索，有时候需要更改一些js代码。
官方api
https://mengshukeji.github.io/LuckysheetDocs/zh/guide/api.html#%E5%8D%95%E5%85%83%E6%A0%BC%E6%93%8D%E4%BD%9C
引入相关js,可以用下载到本地也可以用在线的
在这里插入图片描述

创建表格：
创建静态表格js代码如下（相关参数可以从api中查看）

const options = {
   
   
    container: 'luckysheet',
    lang: 'zh', // 设定表格语言
    title: '需求项目报价单',
    data: [
        {
   
   
            //工作表名称
            "name": "项目需求报价单",
            //工作表颜色
            "color": "",
            "config": {
   
   
                // 合并单元格
                "merge": {
   
   
                    // 公司名
                    "0_0": {
   
   
                        "rs": 1,
                        "cs": 10,
                        "r": 0,
                        "c": 0
                    },
                    // 大标题
                    "1_0": {
   
   
                        "rs": 1,
                        "cs": 10,
                        "r": 1,
                        "c": 0
                    },
                    // 公司行
                    "2_1": {
   
   
                        "rs": 1,
                        "cs": 4,
                        "r": 2,
                        "c": 1
                    },
                    "2_6": {
   
   
                        "rs": 1,
                        "cs": 4,
                        "r": 2,
                        "c": 6
                    },
                    // 联系人
                    "3_1": {
   
   
                        "rs": 1,
                        "cs": 4,
                        "r": 3,
                        "c": 1
                    },
                    "3_6": {
   
   
                        "rs": 1,
                        "cs": 4,
                        "r": 3,
                        "c": 6
                    },
                    // 电话
                    "4_1": {
   
   
                        "rs": 1,
                        "cs": 4,
                        "r": 4,
                        "c": 1
                    },
                    "4_6": {
   
   
                        "rs": 1,
                        "cs": 4,
                        "r": 4,
                        "c": 6
                    },
                    // 地址
                    "5_1": {
   
   
                        "rs": 1,
                        "cs": 4,
                        "r": 5,
                        "c": 1
                    },
                    "5_6": {
   
   
                        "rs": 1,
                        "cs": 4,
                        "r": 5,
                        "c": 6
                    },
                    // 特殊备注
                    "11_1": {
   
   
                        "rs": 1,
                        "cs": 9,
                        "r": 11,
                        "c": 1
                    },
                    // 发货及运输
                    "12_1": {
   
   
                        "rs": 1,
                        "cs": 9,
                        "r": 12,
                        "c": 1
                    },
                    // 售后服务
                    "13_0": {
   
   
                        "rs": 2,
                        "cs": 1,
                        "r": 13,
                        "c": 0
                    },
                    "13_1": {
   
   
                        "rs": 1,
                        "cs": 9,
                        "r": 13,
                        "c": 1
                    },
                    "14_1": {
   
   
                        "rs": 1,
                        "cs": 9,
                        "r": 14,
                        "c": 1
                    },
                },
                // //表格行高
                // "rowlen": {
   
   
                //     "0": 26,
                //     "1": 24,
                // }
            },
            // 工作表索引
            "index": "0",
            "chart": [
                {
   
   
                    "sheetIndex": "0",
                    "dataSheetIndex": "0",
                    "chartType": "column",
                    "row": "[1,3]",
                    "column": "[3,3]",
                    "chartStyle": "default",
                    "myWidth": "480",
                    "myHeight": "288",
                    "myLeft": "67",
                    "myTop": "11"
                }
            ],
            //激活状态
            "status": "1",
            //工作表的顺序
            "order": "0",
            //列数
            "column": 10,
            // 行数
            "row": 8,
            "celldata": [{
   
   
                "r": 0,
                "c": 0,
                "v": {
   
   
                    "ct": {
   
   "fa": "General", "t": "g"},
                    "v":

最低0.47元/天解锁文章