Luckysheet 介绍

Luckysheet ，一款纯前端类似excel的在线表格，功能强大、配置简单、完全开源。

实现功能

格式设置

样式 (修改字体样式，字号，颜色或者其他通用的样式)
条件格式 (突出显示所关注的单元格或单元格区域；强调异常值；使用数据栏、色阶和图标集（与数据中的特定变体对应）直观地显示数据)
文本对齐及旋转
支持文本的截断、溢出、自动换行
数据类型
- 货币, 百分比, 数字, 日期
- Custom (和excel保持一致，例如： ##,###0.00 , $1,234.56$##,###0.00_);[Red]($##,###0.00), _($* ##,###0.00_);_(...($* "-"_);_(@_), 08-05 PM 01:30MM-dd AM/PM hh:mm )
单元格内多样式 (Alt+Enter单元格内换行、上标、下标、单元格内可定义每个文字的不同样式)

单元格

拖拽选取来修改单元格 (对选区进行操作，可以拖动四边来移动选区，也可以在右下角对选区进行下拉填充操作)
选区下拉填充 (对于一个1,2,3,4,5的序列，将会按照间隔为1进行下拉填充，而对2,4,6,8将会以2作为间隔。支持等差数列，等比数列，日期，周，天，月，年，中文数字填充)
自动填充选项 (下拉填充后，会出现填充选项的菜单，支持选择复制，序列，仅格式，只填充格式，天，月，年的选择)
多选区操作 (可以按住Ctrl键进行单元格多选操作，支持多选区的复制粘贴)
查找和替换 (对内容进行查找替换，支持正则表达式，整词，大小写敏感)
定位 (可以根据单元格的数据类型进行自动定位并选中，选中后可以批量进行格式等操作)
合并单元格
数据验证(表单功能) (支持Checkbox, drop-down list, datePicker)

行和列操作

隐藏，插入，删除行或列
冻结行或列 (支持冻结首行和首列，冻结到选区，冻结调节杆可以进行拖动操作)
文本分列 (可以把文本根据不同符号进行拆分，和excel的分列功能类似)

操作体验

撤销/恢复
复制/粘贴/剪切操作 (支持Luckysheet到excel和excel到Luckysheet带格式的互相拷贝)

快捷键支持 (快捷键操作保持与excel一致)

快捷键	功能
CTRL + C	复制单元格
CTRL + V	粘贴单元格
CTRL + X	剪切单元格
CTRL + Z	撤销
CTRL + Y	重做
CTRL + A	全选
CTRL + B	加粗
CTRL + F	查找
CTRL + H	替换
CTRL + I	斜体
CTRL + UP/DOWN/LEFT/RIGHT	快捷调整单元格选框
SHIFT + UP/DOWN/LEFT/RIGHT	调整选区
CTRL + 鼠标左击	多选单元格
SHIFT + 鼠标左击	调整选区
UP/DOWN/LEFT/RIGHT	移动单元格选框
ENTER	编辑单元格
TAB	向右移动单元格选框
DELETE	清除单元格数据

格式刷 (与google sheet类似)
任意选区拖拽 (选择单元格，输入公式，插入图表，会与选区相关，可以通过任意拖动和放大缩小选区来改变与之关联的参数)

公式和函数

内置公式
- 数学 (SUMIFS, AVERAGEIFS, SUMIF, SUM, etc.)
- 文本 (CONCATENATE, REGEXMATCH, MID)
- 日期 (DATEVALUE, DATEDIF, NOW, WEEKDAY, etc.)
- 财务 (PV, FV, IRR, NPV, etc.)
- 逻辑 (IF, AND, OR, IFERROR, etc.)
- 查找和引用 (VLOOKUP, HLOOkUP, INDIRECT, OFFSET, etc.)
- 动态数组 (Excel2019新函数，SORT,FILTER,UNIQUE,RANDARRAY,SEQUENCE)
公式支持数组 (={1,2,3,4,5,6}, Crtl+Shift+Enter)
远程公式 (DM_TEXT_TFIDF, DM_TEXT_TEXTRANK,DATA_CN_STOCK_CLOSE etc. Need remote interface, can realize complex calculation)
自定义公式 (根据身份证识别年龄，性别，生日，省份，城市等. AGE_BY_IDCARD, SEX_BY_IDCARD, BIRTHDAY_BY_IDCARD, PROVINCE_BY_IDCARD, CITY_BY_IDCARD, etc. 可以任意加入自己的公式哦)

表格操作

筛选 (支持颜色、数字、字符、日期的筛选)
排序 (同时加入多个字段进行排序)

数据透视表

字段拖拽 (操作方式与excel类似，拖动字段到行、列、数值、筛选等4个区域)
聚合方式 (支持汇总、计数、去重计数、平均、最大、最小、中位数、协方差、标准差、方差等计算)
筛选数据 (可对字段进行筛选后再进行汇总)
数据透视表下钻 (双击数据透视表中的数据，可以下钻查看到明细，操作方式与excel一致)
根据数据透视表新建图表 (数据透视表产生的数据也可以进行图表的制作)

图表

支持的图表类型 (目前折线图、柱状图、面积图、条形图、饼图可以使用，散点图、雷达图、仪表盘、漏斗图正在接入，其他图表正在陆续开发中，请大家给予建议)
关于图表插件 (图表使用了一个中间插件ChartMix (opens new window)(MIT协议): 目前支持ECharts，正在逐步接入Highcharts、阿里G2、amCharts、googleChart、chart.js)
Sparklines小图 (以公式的形式进行设置和展示，目前支持：折线图、面积图、柱状图、累积图、条形图、离散图、三态图、饼图、箱线图等)

插入对象

插入图片 (支持JPG,PNG,SVG的插入、修改和删除，并且随表格的变动而产生变化)

Luckysheet专有

矩阵计算 (通过右键菜单进行支持：对选区内的数据进行转置、旋转、数值计算)
截图 (把选区的内容进行截图展示)
复制到其他格式 (右键菜单的"复制为", 支持复制为json、array、对角线数据、去重等)

功能界面

功能界面如下：

在vue中引入Luckysheet

Luckysheet文档

Luckysheet社区

Luckysheet github地址

LuckySheet打包

克隆源码

克隆Luckysheet源码到本地

git clone https://github.com/dream-num/Luckysheet.git

安装依赖

npm install
npm install gulp -g

开发

npm run dev

打包

npm run build

Luckysheet 使用步骤

1.本地引入

npm run build 后 dist 文件夹下的所有文件复制到vue项目的public目录下，然后在index.html文件中通过相对路径引入：

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

2.指定一个表格容器

<div id="luckysheet" class="luckysheet-wrap"></div><style scoped>
.luckysheet-wrap {margin: 0px;padding: 0px;position: absolute;width: 100%;height: 100%;left: 0px;top: 0px;
}
</style>

3.创建一个表格

data () {return {// 配置项options: {container: 'luckysheet', // DOM容器的IDtitle: '电子表格', // 工作簿名称lang: 'zh', // 设定表格的语言showtoolbarConfig: {print: false,  // 工具栏隐藏打印按钮},showsheetbarConfig: {add: false, // 底部sheet页隐藏新增sheet按钮menu: false, // 底部sheet页隐藏管理按钮},sheetRightClickConfig: {hide: false, // 隐藏，取消隐藏move: false, // 向左移，向右移}}};},
mounted () {this.createSheet()
},
methods:{// 创建工作表createSheet () {// 初始化表格luckysheet.create(this.options)// 获取Luckysheet表格文件的数据this.sheetfile = luckysheet.getluckysheetfile()// console.log(this.sheetfile)}
}

Luckysheet 整体配置

基础结构

初始化表格时，可以设置一个对象 options 来自定义配置Luckysheet表格。

如下是一个简洁的配置案例：

// 配置项
const options = {container: 'luckysheet', // 设定DOM容器的idtitle: 'Luckysheet Demo', // 设定表格名称lang: 'zh' // 设定表格语言// 更多其他设置...
}// 初始化表格
luckysheet.create(options)

这里的 options 配置项会作用于整个表格，单个sheet的配置则需要在 options.data 数组中，分别设置对应更详细的参数，参考工作表配置

常用配置

container

类型：String
默认值：“luckysheet”
作用：容器的ID

title

类型：String
默认值：“Luckysheet Demo”
作用：工作簿名称

lang

类型：String
默认值：“en”
作用：国际化设置，允许设置表格的语言，支持简体中文(“zh”)、英文(“en”)、繁体中文(“zh_tw”)和西班牙文(“es”)

data

类型：Array
默认值：[{ “name”: “Sheet1”, color: “”, “status”: “1”, “order”: “0”, “data”: [], “config”: {}, “index”:0 }, { “name”: “Sheet2”, color: “”, “status”: “0”, “order”: “1”, “data”: [], “config”: {}, “index”:1 }, { “name”: “Sheet3”, color: “”, “status”: “0”, “order”: “2”, “data”: [], “config”: {}, “index”:2 }]
作用：当未配置loadUrl和loadSheetUrl的时候，需要手动配置传入整个客户端所有sheet数据[shee1, sheet2, sheet3]，详细参数设置参见工作表配置

plugins

类型：Array
默认值：[]
作用：配置插件，支持图表：“chart”

column

类型：Number
默认值：60
作用：空表格默认的列数量

row

类型：Number
默认值：84
作用：空表格默认的行数据量

showtoolbar

类型：Boolean
默认值：true
作用：是否显示工具栏

showtoolbarConfig

类型：Object
默认值：{}
作用：自定义配置工具栏，可以与showtoolbar配合使用，showtoolbarConfig拥有更高的优先级。

示例：

仅显示撤消重做和字体按钮：

// options
{showtoolbar: false,showtoolbarConfig:{undoRedo: true,font: true,}
}

仅隐藏图片和打印按钮：

// options
{showtoolbar: true, // 默认就是true，可以不设置showtoolbarConfig:{image: false,print: false,}
}

showsheetbar

类型：Boolean
默认值：true
作用：是否显示底部sheet页按钮

showsheetbarConfig

类型：Object
默认值：{}
作用：自定义配置底部sheet页按钮，可以与showsheetbar配合使用，showsheetbarConfig拥有更高的优先级。

格式：

{add: false, // 新增sheet  menu: false, // sheet管理菜单sheet: false // sheet页显示
}

示例：

仅显示新增sheet按钮：

// options
{showsheetbar: false,showsheetbarConfig:{add: true,}
}

仅隐藏新增sheet和管理按钮：

// options
{showsheetbar: true, // 默认就是true，可以不设置showsheetbarConfig:{add: false,menu: false,}
}

sheetRightClickConfig

类型：Object
默认值：{}
作用：自定义配置sheet页右击菜单

格式：

{   delete: false, // 删除copy: false, // 复制rename: false, // 重命名color: false, // 更改颜色hide: false, // 隐藏，取消隐藏move: false, // 向左移，向右移
}

钩子函数

钩子函数应用于二次开发时，会在各个常用鼠标或者键盘操作时植入钩子，调用开发者传入的函数，起到扩展Luckysheet功能的作用。

钩子函数统一配置在options.hook下，可以分别针对单元格、sheet页、表格创建配置hook。

使用案例可参考源码 src/index.html

常用钩子函数如下：

鼠标钩子：

scroll

类型：Function
默认值：null
作用：鼠标滚动事件
参数：
- {Object} [position]:
  - {Number} [scrollLeft]:横向滚动条的位置
  - {Number} [scrollTop]:垂直滚动条的位置
  - {Number} [canvasHeight]:canvas高度

工作簿：

workbookCreateAfter

类型：Function
默认值：null
作用：表格创建之后触发
参数：
- {Object} [book]: 整个工作簿的配置（options）

Luckysheet 常用 API 操作

单元格操作

getCellValue(row, column [,setting])

参数：
- {Number} [row]: 单元格所在行数；从0开始的整数，0表示第一行
- {Number} [column]: 单元格所在列数；从0开始的整数，0表示第一列
- {PlainObject} [setting]: 可选参数
  - {String} [type]: 单元格的值类型，可以设置为原始值v或者显示值m；默认值为v,表示获取单元格的实际值
  - {Number} [order]: 工作表下标；默认值为当前工作表下标
说明：

获取单元格的值。

特殊情况，单元格格式为yyyy-MM-dd，type为'v'时会强制取'm'显示值

setCellValue(row, column, value [,setting])

参数：
- {Number} [row]: 单元格所在行数；从0开始的整数，0表示第一行
- {Number} [column]: 单元格所在列数；从0开始的整数，0表示第一列
- {Object | String | Number} [value]: 要设置的值；可以为字符串或数字，或为符合Luckysheet单元格格式的对象
- {PlainObject} [setting]: 可选参数
  - {Number} [order]: 工作表下标；默认值为当前工作表下标
  - {Boolean} [isRefresh]: 是否刷新界面；默认为true；用于多个单元格赋值时候控制节流，前面单元格赋值的时候应设置为 false，最后一个单元格赋值时设置为true。
  - {Function} [success]: 操作结束的回调函数
说明：

设置某个单元格的值，也可以设置整个单元格对象，用于同时设置多个单元格属性。

如果需要更新公式，也可以在这里赋值，Luckysheet在内部会主动把这个公式做计算并加入到公式链中，最后重刷界面。

选区操作

getRangeJson(title [,setting])

参数：
- {Boolean} [title]: 是否首行为标题
  
  title可能的值有：
  - "true": 首行为标题
  - "false": 首行不为标题
- {PlainObject} [setting]: 可选参数
  - {Array | Object | String} [range]: 选区范围,支持选区的格式为"A1:B2"、"sheetName!A1:B2"或者{row:[0,1],column:[0,1]}，只能为单个选区；默认为当前选区
  - {Number} [order]: 工作表下标；默认值为当前工作表下标
说明：

复制指定工作表指定单元格区域的数据，返回json格式的数据

工作表操作

getAllSheets()

说明：

返回所有工作表配置，格式同工作表配置，得到的结果可用于表格初始化时作为options.data使用。

所以此API适用于，手动操作配置完一个表格后，将所有工作表信息取出来自行保存，再用于其他地方的表格创建。如果想得到包括工作簿配置在内的所有工作簿数据，推荐使用 toJson，并且可以直接用于初始化Luckysheet。
示例:
- 取得第一个工作表的所有基本信息 luckysheet.getAllSheets()[0]

getLuckysheetfile()

说明：

返回所有表格数据结构的一维数组luckysheetfile，不同于getAllSheets方法，此方法得到的工作表参数会包含很多内部使用变量，最明显的区别是表格数据操作会维护luckysheetfile[i].data，而初始化数据采用的是options.data[i].celldata，所以luckysheetfile可用于调试使用，但是不适用初始化表格。

除此之外，加载过的工作表参数中会增加一个load = 1，这个参数在初始化数据的时候需要置为0才行。所以，将getLuckysheetfile()得到的数据拿来初始化工作簿，需要做两个工作：
- celldata转为data，参考:transToData
- load重置为0或者删除此字段
现在已有getAllSheets来完成这个工作，无需再手动转化数据。
示例:
- 取得第一个工作表的所有调试信息 luckysheet.getLuckysheetfile()[0]

工作簿操作

create(options)

参数：
- {Object} [options]:表格的所有配置信息
说明：

初始化一个Luckysheet，可包含多个工作表

getWorkbookName([,setting])

参数：
- {PlainObject} [setting]: 可选参数
  - {Function} [success]: 操作结束的回调函数
说明：

获取工作簿名称

Luckysheet 自定义操作

导入JSON数据

// 导入json数据
importJson (data) {let range = luckysheet.getRange()// console.log(range)let row = range[0].row[0]let column = range[0].column[0]if (data.length > 0) {let keys = Object.keys(data[0])// console.log(keys)keys.forEach((item, index) => {luckysheet.setCellValue(row, column + index, item)})}data.forEach((item1, index1) => {// console.log(item1)let values = Object.values(item1)// console.log(values)values.forEach((item2, index2) => {luckysheet.setCellValue(row + 1 + index1, column + index2, item2)})})
}

sheetData是一个JSON数组，格式如下：

[{"年级":"初一","姓名":"李四","学号":7142,"年龄":18,"籍贯":"河北","成绩":79},{"年级":"初二","姓名":"王五","学号":7143,"年龄":19,"籍贯":"河北","成绩":80},{"年级":"初三","姓名":"李华","学号":7144,"年龄":20,"籍贯":"山东","成绩":81},{"年级":"初一","姓名":"赵国","学号":7145,"年龄":21,"籍贯":"河北","成绩":82},{"年级":"初一","姓名":"李青","学号":7146,"年龄":22,"籍贯":"河北","成绩":83},{"年级":"初三","姓名":"王国","学号":7147,"年龄":23,"籍贯":"山西","成绩":84},{"年级":"初一","姓名":"正东","学号":7148,"年龄":24,"籍贯":"四川","成绩":85},{"年级":"初二","姓名":"钱多","学号":7149,"年龄":25,"籍贯":"河北","成绩":86},{"年级":"初一","姓名":"付丽","学号":7150,"年龄":26,"籍贯":"贵州","成绩":87}
]

导出JSON数据

选中工作区，才能导出JSON数据

// 导出json数据
exportJson () {let jsonData = luckysheet.getRangeJson(true)console.log(jsonData)
}

导出csv格式

选中工作区，才能导出csv格式的数据

// 导出工作表csv格式
exportCsv () {let name = luckysheet.getWorkbookName()// console.log(name)let exceldata = luckysheet.getRangeJson(true)// console.log(exceldata)let data = ""let keys = Object.keys(exceldata[0])// console.log(keys)data = keys.join(",")exceldata.forEach(item => {let values = Object.values(item)// console.log(values)data += "\n" + values.join(",")})// console.log(data)// Download elementvar blob = new Blob(["\uFEFF" + data], { type: 'text/csv;charset=utf-8;' });// IE Compatibilityif (window.navigator && window.navigator.msSaveOrOpenBlob) {window.navigator.msSaveOrOpenBlob(blob, name + '.csv');} else {// Download elementvar pom = document.createElement('a');var url = URL.createObjectURL(blob);pom.href = url;pom.setAttribute('download', name + '.csv');document.body.appendChild(pom);pom.click();pom.parentNode.removeChild(pom);}
},

保存数据给后端接口

// 保存工作表数据
saveData () {let data = luckysheet.getLuckysheetfile()data.forEach((item, index) => {if (item.chart) {item.chart.forEach((chart, i) => {data[index].chart[i] = {...data[index].chart[i],chartOptions: { ...chartmix.default.getChartJson(chart.chart_id) }}let div = document.getElementById(chart.chart_id + '_c');if (div.style) {data[index].chart[i].left = parseInt(div.style.left)data[index].chart[i].top = parseInt(div.style.top)data[index].chart[i].width = parseInt(div.style.width)data[index].chart[i].height = parseInt(div.style.height)}})}})console.log(data)
}

从后端接口加载数据

创建表格前，手动配置传入整个客户端所有sheet数据的options的data选项

mounted () {this.setData()// this.createSheet()// this.addButton()
},
methods: {setData () {this.$axios.post("/api/sheetData").then(res => {console.log(res)this.$set(this.options, "data", res.data)// this.options.data = res.dataconsole.log(this.options.data)this.createSheet()})}
}

Luckysheet 性能测试

单条数据量不大的情况下，支持5000+的数据量不卡

Luckysheet 源码项目结构

src/controllers/ sheet 主要操作
- conditionformat 条件格式
- constant.js 页面结构html模板代码
- controlHistory.js 撤销操作
- dataVerificationCtrl.js 数据验证操作
- dropCell.js 选区下拉
- expendPlugins.js 插件扩展
- filter.js 筛选排序
- formulaBar.js 公示栏
- freezen.js 行列冻结操作
- hyperlinkCtrl.js 插入链接操作
- ifFormulaGenerator.js if公式生成器
- imageCtrl.js 插入图片及图片设置
- insertFormula.js 插入函数
- sheetmanage.js sheet操作代码
- sheetBar.js 表格底部名称栏区域相关事件（增、删、改、隐藏显示、颜色等等）
- splitColumn.js 分列操作
- toolbar.js 工具栏按钮配置
src/expendPlugins/ 扩展
- chart 图表扩展
src/locale/ 语言包
- zh.js 中文包
src/config.js 默认导出sheet创建配置信息
src/css/luckysheet-core.css 页面结构样式类

vue项目中引入Luckysheet相关推荐

【VUE 项目中使用luckysheet（在线表格）】
VUE 项目中使用luckysheet 描述资料本地引入组件开发创建组件组件使用使用中遇到的问题 1. 后台图表chartMix报undefined 2. 回显时默认显示第一个sheet ...
vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
如何在Vue项目中引入ArcGIS JavaScript API 创建三维可视化地图（含vue项目创建教程）
新手上路之在Vue项目中引入ArcGIS API 视频教程 B站搜索 X北辰北,感谢up主无私的教学~ B站地址:https://www.bilibili.com/video/BV18E411K7B ...
VUE 项目中引入外部js文件（CND引入）
以VUE项目中引入echarts文件为例: 第一步在VUE项目中找到index.html文件引入 :<script src="https://cdnjs.cloudflare.com ...
如何在vue项目中引入html页面
在vue项目中引入html页面的两种方法第一种:/static/page.html 第二种:通过iframe嵌入第一种:/static/page.html 在static或public文件夹下,新 ...
vue项目中引入bootstrap的方法
vue项目中引入bootstrap?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 相关教程推荐:<bootstrap教程> 在 vue 项目 ...
【EasyExcel】在SpringBoot+VUE项目中引入EasyExcel实现对数据的导出（封装工具类）
在SpringBoot+VUE项目中引入EasyExcel实现导入导出一.引入EasyExcel 通过maven引入,坐标如下: <dependency><groupId>c ...
vue项目中引入字体包
问题: 项目开发过程中,因UI的显示要求,需要引入一些字体,那如何引入外部字体呢?很简单,只需要以下3步一下载对应的字体包文件,放置到我们的项目中比如我需要PingFangSC的系列字体,我 ...
vue项目中引入monaco editor
monaco-editor概述 monaco-editor 是微软开源的一款web代码编辑器,vscode就是集成monaco-editor来实现的. 官方示例官方文档使用安装 npm安装 np ...

vue项目中引入Luckysheet