一. 概述
推荐一个开源的在线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>
3.2 打开首页 http://localhost:3000/
image.png
3.3 表格数据结构
一个完整的Luckysheet表格文件的数据格式为：luckysheetfile，一个表格文件包含若干个sheet文件，对应excel的sheet0、sheet1等。可以通过
luckysheet.getluckysheetfile()获取表格整体数据
image.png
网友评论