luckysheet的使用

前言

公司新需求要一个在线的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容器的id
        title: "原始记录表格", // 设定表格名称
        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, //新增sheet
          menu: true, //sheet管理菜单
          sheet: true, //sheet页显示
        },
        data: [
          {
            name: "测试",
            celldata: [],
          },
        ],
      }
window.luckysheet.create(options);

---

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

//事件写在luckysheet初始化之后
//myElement为functionButton中的button的id
 const 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/