Vue项目使用Luckysheet

发表于2023-02-20更新于2023-02-20字数统计865阅读时长7分

背景

网上找到的案例很多都是基于非Vue框架集成的Luckysheet，现在启动的一个新Vue项目需要集成表格模板在线编辑的功能，因此需要一个Vue项目集成Luckysheet的解决方案，如本文。

Luckysheet的集成

依赖的生成与导入

  1. 下载项目源码到本地

https://github.com/mengshukeji/Luckysheet.git

  1. 用你的本地IDE打开项目并输入以下命令
1
2
3
4
npm install
npm install gulp -g
npm run dev
npm run build

本地依赖

  1. 将生成的dist文件夹复制到项目目录public下面（可以自己新建一个目录比如我这里的luckysheet）

dist文件

  1. 在自己的项目中的public/index.html中添加Luckysheet依赖
1
2
3
4
5
6
7
<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>

至此，Luckysheet的准备工作已经全部完成，接下来是如何生成一个在线的表格

使用Luckysheet

新建一个页面如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<template>
  <div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 20px;" />
</template>

<script>

export default {
  data() {
    return {
    }
  },
  mounted() {
    // In some cases, you need to use $nextTick
    // this.$nextTick(() => {
    // eslint-disable-next-line no-undef
    $(function() {
      window.luckysheet.create({
        container: 'luckysheet', // 设定DOM容器的id
        title: '测试Excel', // 表 头名
        lang: 'zh', // 中文
        showinfobar: false, // 是否显示顶部信息栏
        showsheetbar: true, // 是否显示底部sheet按
        // loadUrl: 'http://localhost:5086/api/sheet/sheet/66'
        data: [
          {
            name: 'guistar的测试表格', // 工作表名称
            color: '#eee333', // 工作表(工作表名称底部边框线)颜色
            index: 0, // 工作表索引(新增一个工作表时该值是一个随机字符串)
            status: 1, // 激活状态
            order: 0, // 工作表的下标
            hide: 0, // 是否隐藏
            row: 30, // 行数
            column: 17, // 列数
            defaultRowHeight: 28, // 自定义行高,单位px
            defaultColWidth: 100, // 自定义列宽,单位px
            celldata: [], // 初始化使用的单元格数据,r代表行，c代表列，v代表该单元格的值，最后展示的是value1，value2
            config: {
              merge: {}, // 合并单元格
              rowlen: {}, // 表格行高
              columnlen: {}, // 表格列宽
              rowhidden: {}, // 隐藏行
              colhidden: {}, // 隐藏列
              borderInfo: {}, // 边框
              authority: {} // 工作表保护
            },
            scrollLeft: 0, // 左右滚动条位置
            scrollTop: 0, // 上下滚动条位置
            luckysheet_select_save: [], // 选中的区域
            calcChain: [], // 公式链
            isPivotTable: false, // 是否数据透视表
            pivotTable: {}, // 数据透视表设置
            filter_select: {}, // 筛选范围
            filter: null, // 筛选配置
            luckysheet_alternateformat_save: [], // 交替颜色
            luckysheet_alternateformat_save_modelCustom: [], // 自定义交替颜色
            luckysheet_conditionformat_save: {}, // 条件格式
            frozen: {}, // 冻结行列配置
            chart: [], // 图表配置
            zoomRatio: 1, // 缩放比例
            image: [], // 图片
            showGridLines: 1, // 是否显示网格线
            dataVerification: {} // 数据验证配置
          }
        ]
      })
    })
  },
  methods: {
  }
}

</script>

<style lang="scss" scoped>
</style>

启动项目即可看到

luckysheet

问题汇总

图表生成报错 ga.createChart is not a function

问题复现

图表生成报错

问题解决
  1. 在自己的项目中的public/index.html中添加chartmix依赖
1
2
<link rel='stylesheet' href='/luckysheet/expendPlugins/chart/chartmix.css'/>
<script src="/luckysheet/expendPlugins/chart/chartmix.umd.min.js"></script>
  1. 修改luckysheet/luckysheet.umd.js，全局查询expendPlugins，将目录修改对应

修改luckysheet.umd.js

至此，问题得到解决

解决