一. 概述

推荐一个开源的在线excel编辑器
Luckysheet官方文档

二. 安装

# 拉取代码
git clone https://github.com/mengshukeji/Luckysheet.git

# 安装
npm install
npm install gulp -g

# 运行
npm run build

备注:我在运行时候报错:esbuild: Failed to install correctly,抓头了很久,最后手动运行命令node node_modules/esbuild/install.js 就解决esbuil安装问题,然后再运行npm run build就没问题了

三. 简单上手试用

3.1 修改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' />
    <link rel='stylesheet' href='./assets/iconfont/iconfont.css' />
    <script src="./plugins/js/plugin.js"></script>
    <script src="./luckysheet.umd.js"></script>

</head>

<body>

    <!-- 引入测试数据 -->
    <script src="./demoData/demo.js"></script>

    <!-- 指定一个表格容器 -->
    <div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>


    <script>
        $(function () {
            <!-- 表耳配置信息 -->
            let options = {
                container: 'luckysheet', // 容器ID
                title: '任未然', // 设定表格名称
                lang: 'zh', // 设定表格语言
                data: [demo] // 初始化数据
            }
            <!-- 创建一个表格 -->
            luckysheet.create(options)
        })
    </script>
</body>

</html>