luckysheet问题解决集锦

由于我们采用了滴滴的脑图测试用例的方式，但是后面发现部分业务可能更偏向于系统测试的同学的用例内容在脑图上完全不使用，他们更多的是一些测试结果的一些记录，而不是纯粹的执行结果的通过或者失败的情况。为了考虑都是用同一个平台，所以就想着是否有个支持在线excel表的方式，所以就有了我们的 https://github.com/mengshukeji/Luckysheet

问题1：加载luckysheet后，点击图表功能，不可用。**报错Store.createChart

官方回复：

需要引入图表插件才能使用，工作簿初始化的时候应该配置图表插件使用，参考

• 插件配置 plugins

通常，参考demo配置完后就可以和demo一样正常使用了，但是还是会偶现chartmix is not defined，这时需要在谷歌浏览器控制台的network里检查下图表的依赖是否都加载了，有5项依赖需要关注：vue / vuex / element-ui / echarts / chartmix.umd.js

问题2：CDN问题的处理

这个问题其实是很头疼的，由于luckysheet并没有npm 库，所以需要通过cdn的方式去加载所有的资源，但是cdn的地址很大概率出现资源无法访问的情况。所以就需要将对应js的下载地址迁移到自己的cdn域下，但是这里有个关键的问题就是并不是把所有的js跟css文件做迁移就可以了，里面其实css样式文件里面还涉及到了很多的字体库，或者其他资源图片等。这些其实都是需要做迁移的，否则如果不做迁移，很多资源的访问都会报404的错误的。

问题3： 图表保存数据中缺失了chartOptions,保存后的数据重新加载的时候，图表不会被绘制出来。

解决：

https://github.com/mengshukeji/Luckysheet/issues/605

由于luckysheet的api luckysheet.getAllSheets() 获取到的chart的字段中不包含有chartOptions, 所以这个逻辑需要自己去处理。

$(function () {
    //配置项
    var options = {
        container: 'luckysheet', //luckysheet为容器id
        plugins: ['chart']
    }
    //这里初始化加载时从localStorage里取存储的数据
    options.data = JSON.parse(localStorage.getItem('luckysheet'))
    luckysheet.create(options)
})
//自己编写的函数，存储前将配置合并到luckysheet中到chart对象里
function getLuckysheetConfig() {
    let ls = luckysheet.getLuckysheetfile()
    ls.forEach((item, index) => {
        if(item.chart) {
            item.chart.forEach((chart, i) => {
                ls[index].chart[i] = {
                    ...ls[index].chart[i],
                    chartOptions: {...chartmix.default.getChartJson(chart.chart_id)}
                }
                let div = document.getElementById(chart.chart_id + '_c');
                if(div.style) {
                    ls[index].chart[i].left = parseInt(div.style.left)
                    ls[index].chart[i].top = parseInt(div.style.top)
                    ls[index].chart[i].width = parseInt(div.style.width)
                    ls[index].chart[i].height = parseInt(div.style.height)
                }
            })
        }
    })
    return JSON.stringify(ls)
}
//浏览器控制台直接调用save()函数即可保存配置
function save() {
    localStorage.setItem('luckysheet', getLuckysheetConfig())
}

以上的逻辑就能够在原先的数据中增加chartOptions了。

PS: 浏览相关luckysheet的文章时，发现有另外的一种解决方法：

记录–luckysheet各种报错处理以及部分功能问题（不定期更新，碰到啥问题就记录啥问题）

问题4： 从excel表中导入带有公式的内容时，存在部分公式生效部分不生效的情况

查了下官方的常见问题有如下的内容解释：

为什么初始化后表格里面的公式不会被触发？

A：参考 表格数据格式 ,设置单元格数据对应的calcChain即可。

所以去解析了下前端解析的表格数据，发现calcChain的数据中就不存在公式失效的单元格的数据。所以可以这么怀疑前端解析的calcChain数据有遗漏。所以还是需要去额外处理这块的数据了。

所以解决方法即拿到excel表的数据后，重新处理calcChain的数据即可了。

exports.processCellData = function (excelData) {
    let data = JSON.parse(excelData);
    for (const item of data) {
        // 遍历
        let calcChain = [];
        let index = item.index;
        for (const item2 of item.celldata) {
            if (typeof(item2.v.f) !== 'undefined') {
                calcChain.push({
                    r: item2.r,
                    c: item2.c,
                    index,
                })
            }
        }
        item.calcChain = calcChain;
    }

    return JSON.stringify(data);
};

如此保证calcChain中的数据都包含有公示的单元格即可。