Luckysheet基础用法，使用loadUrl加载服务端数据

最新推荐文章于 2025-04-11 09:59:31 发布

DCDC2020

最新推荐文章于 2025-04-11 09:59:31 发布

阅读量3w

点赞数 3

文章标签： node.js javascript

本文链接：https://blog.csdn.net/DCDC2020/article/details/108486525

版权

本文针对Luckysheet初学者，详细介绍了如何利用loadUrl功能从服务端加载数据。通过一个基于Express的示例，展示了如何设置后端返回JSON数据，并在前端展示在Luckysheet中，帮助理解这一核心功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作为Luckysheet的初学者，阅读官方文档可能有很多不懂的地方，又比较难找到简单的示例，大家都是摸着石头过河。

本文代码分享在这里：
https://github.com/danielcai1987/LuckysheetLearn

Luckysheet文档是这样介绍loadUrl的

loadUrl

类型：String
默认值：""
作用：配置loadUrl的地址，Luckysheet会通过ajax请求表格数据，默认载入status为1的sheet数据中的所有data，其余的sheet载入除data字段外的所有字段

由上得知loadUrl是从服务端的URL来请求数据的，于是我设想，先弄个后端服务来提供数据。用的是Express，目录结构：

目录结构
data/test.json是Luckysheet的数据，Luckysheet文件夹包含了build好的Luckysheet和index.html作为创建表格的入口文件，server.js是Express服务端。

代码如下：
test.json

[
  {
    "name": "Sheet1",
    "config": {},
    "index": "1",
    "status": "1",
    "order": "0",
    "luckysheet_select_save": [
      { "row": [0, 0], "column": [4, 4], "sheetIndex": 1 }
    ],
    "zoomRatio": 1,
    "showGridLines": "1",
    "defaultColWidth": 80,
    "defaultRowHeight": 20,
    "celldata": [
      {
        "r": 0,
        "c": 0,
        "v": {
          "v": "Luckysheet",
          "ct": { "fa": "General", "t": "g" },
          "bg": null,
          "bl": 0,
          "it": 0,
          "ff": 1,
          "fs": "11",
          "ht": 1,
          "vt": 1,
          "m": "Luckysheet"
        }
      }
    ],
    "calcChain": []
  }
]

index.html

<!DOCTYPE html>
<html>
  <head lang="zh">
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="renderer" content="webkit" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1,user-scalable=0"
    />
    <title>Luckysheet</title>

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

    <!-- rollup luckysheet.js -->
    <script src="./luckysheet.umd.js"></script>
  </head>

  <body>
    <div
      id="luckysheet"
      style="
        margin: 0px;
        padding: 0px;
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0px;
        top: 0px;
      "
    ></div>
    <script type="module">
      $(function () {
        luckysheet.create({
          container: 'luckysheet',
          lang: 'zh',
          allowEdit: true,
          forceCalculation: false,
          loadUrl: 'http://localhost:8000/load/test.json',
        });
      });

    </script>
  </body>
</html>

server.js

const express = require("express");
const path = require("path");
const fs = require("fs");
const app = express();
const PORT = 8000;

app.use(express.static("Luckysheet"));

app.post("/load/:json_file", (req, res) => {
  let data = fs.readFileSync(
    path.join(__dirname, "/data", req.params.json_file)
  );
  res.send(data);
});

app.listen(PORT, function () {
  console.log("Express server listening on port ", PORT);
});