在v14中,我们加入了一个很实用的功能——区域导出为HTML。顾名思义,也就是将一系列单元格导出为HTML字符串。那么这个功能有什么具体的实际用途呢?这边就给大家提供一个使用SpreadJS的新思路。
在实际开发中,有小伙伴想要将咱们SpreadJS隐藏起来,使其看起来更像一个网页,而不是电子表格。与此同时,又想用到SpreadJS强大的计算引擎以及与Excel高度兼容的特性。这时候,可以将SpreadJS打包成一个“计算引擎”。通过接收页面的输入,然后得到运算结果,并且在页面进行展示。整个过程,用户在使用的体验上是没有察觉到有表格的存在。
可能说起来比较抽象,这边提供了一个案例的截图,帮助大家理解。
由图我们可以看到左侧为输入框,右侧是结果输出的展示。左侧为html的input框,接收数据后传入SpreadJS进行计算。右侧是一个表单的模板,通过toHTML进行展示。传入的数据在SpreadJS计算完毕后,通过此表单的toHTML对数据进行转化展示。
其中最关键的两个点就是:区域导出为HTML与SpreadJS的公式计算。
主要思路如下:
首先,我们可以在在线表格编辑器设计模板以及将单元格之间的引用关系添加到里面;
然后,制作用于输出的模板,也就是需要转HTML的模板,这部分用于界面展示;
其次,我们再制作用于能接收输入数据的模板,这部分用于接收输入框的数据;
接着,我们将这个模板导出为ssjson,在我们的项目中导入;
接下来,实现前端的数据输入与接收并传给SpreadJS;
最后,将处理数据的表单转为HTML。
注意:别忘了把承载SpreadJS的DOM隐藏!
附上区域导出为HTML的学习指南地址:
https://demo.grapecity.com.cn/sp ... ange-to-html/purejs
|
|