前言

公司新需求要一个在线的excel编辑器

一、luckysheet是什么？

LuckySheet是一款基于Web的在线表格组件，一款纯前端类似excel的在线表格，功能强大、配置简单、完全开源结合Vue3可以实现数据的动态展示和编辑，为用户提供良好的用户体验。

二、使用步骤

1.引入库

有两种方式，第一种是直接通过npm下载

npm install luckysheet

第二种是将luckysheet下载到本地之后打包之后在引入(我会在另一篇文章中写怎么打包)

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

 

（将打包后的包放在public中）

2.使用

let options={container: "luckysheet", // 设定DOM容器的idtitle: "原始记录表格", // 设定表格名称lang: "zh", // 设定表格语言,gridKey: "luckysheet",showtoolbar: true, //是否显示工具栏functionButton:'<button id="myElement" class="btn"  style="padding:3px 6px;font-size: 12px;margin-right: 10px;">保存</button>',showtoolbarConfig: {undoRedo: true, //撤销重做，注意撤消重做是两个按钮，由这一个配置决定显示还是隐藏paintFormat: true, //格式刷currencyFormat: true, //货币格式percentageFormat: true, //百分比格式numberDecrease: true, // '减少小数位数'numberIncrease: true, // '增加小数位数moreFormats: true, // '更多格式'font: true, // '字体'fontSize: true, // '字号大小'bold: true, // '粗体 (Ctrl+B)'italic: true, // '斜体 (Ctrl+I)'strikethrough: true, // '删除线 (Alt+Shift+5)'underline: true, // '下划线 (Alt+Shift+6)'textColor: true, // '文本颜色'fillColor: true, // '单元格颜色'border: true, // '边框'mergeCell: true, // '合并单元格'horizontalAlignMode: true, // '水平对齐方式'verticalAlignMode: true, // '垂直对齐方式'textWrapMode: true, // '换行方式'textRotateMode: true, // '文本旋转方式'image: true, // '插入图片'link: true, // '插入链接'chart: true, // '图表'（图标隐藏，但是如果配置了chart插件，右击仍然可以新建图表）postil: true, //'批注'pivotTable: true, //'数据透视表'function: true, // '公式'frozenMode: true, // '冻结方式'sortAndFilter: true, // '排序和筛选'conditionalFormat: true, // '条件格式'dataVerification: true, // '数据验证'splitColumn: true, // '分列'screenshot: true, // '截图'findAndReplace: true, // '查找替换'protection: true, // '工作表保护'（解除保护密码为admin）print: false, // '打印'},showsheetbar: false,showsheetbarConfig: {add: true, //新增sheetmenu: true, //sheet管理菜单sheet: true, //sheet页显示},data: [{name: "测试",celldata: [],},],}
window.luckysheet.create(options);

---

其中options里面的functionButton需要注意下只能用javascript的点击事件

//事件写在luckysheet初始化之后
//myElement为functionButton中的button的idconst element = document.getElementById("myElement");
// 为该元素添加点击事件监听器element.addEventListener("click", function () {});

填充进表格中的数据需要转化为二维数据

 let array= [['iii','uuuuu'],['1111','2222']]options.data[0].celldata=window.luckysheet.transToCellData(array)

总结 

luckysheet的文档地址为https://mengshukeji.gitee.io/luckysheetdocs/zh/