luckysheet 初始化渲染问题

debug真快乐

已于 2022-04-20 14:02:24 修改

阅读量4.9k

点赞数 2

分类专栏： luckysheet VUE js 文章标签：前端框架 vue.js javascript

于 2022-04-18 15:43:44 首次发布

本文链接：https://blog.csdn.net/qq_43734389/article/details/124250832

版权

在使用Luckysheet这个开源Excel插件时遇到初始化渲染问题，它仅使用数据的真实值（v）而非显示值（m）进行渲染。解决方法包括在创建时先用luckysheet.create初始化并设置样式，再利用luckysheet.setRangeValue设置显示值。然而，这样会导致公式在第二次渲染时失效，因为setCellValue方法只有在v为null时才会触发设置公式。最终解决方案是在渲染前将需要处理的data中公式单元格的v设为null，然后通过setRangeValue进行赋值，确保样式和公式都能正确呈现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

excel老折磨了，好不容易找到个看起来挺好用的开源插件，结果BUG也还挺多……
luckysheet的初始化渲染，往data里面填值后，他只拿data的v（真实值），不拿data的m（显示值）来渲染，这就造成了比如我做了个显示值为“名字”，真实值为"name"的单元格，然后利用初始化方法luckysheet.create(option)传进的option.data中来进行初始化渲染时，所有单元格都只会渲染真实值。翻看源码

m直接取了value，value是处理过的v

所以可以这么做
1、上送接口存的时候顺带存下来选取的范围
2、渲染的时候先利用luckysheet.create来进行初始化渲染，锚上所有样式
3、利用存下来的范围和luckysheet.setRangeValue来锚显示值

这样做的话等于说是渲染了两遍，先渲染了格式，然后再用有显示值的数据覆盖渲染一遍
但是在实际测试中出现了另外的问题：luckysheet.create初始化时公式是有效的，luckysheet.setRangeValue渲染时公式无效了，还是翻源码，发现原因在这

setRangeValue本质上是在遍历调用setCellValue进行单元格赋值，而setCellValue方法只有当v==null时才会去触发设置公式的方法

所以现在有了最终方案
1、上送接口存的时候顺带存下来选取的范围
2、渲染的时候先利用luckysheet.create来进行初始化渲染，锚上所有样式
3、摘出需要渲染的data值，找有f属性的对象，给该对象的v赋值为null
4、利用存下来的范围和第三步处理过的数据调用luckysheet.setRangeValue来锚值

经过测试，样式和公式都能渲染出来