纯前端表格控件SpreadJS - 轻松实现电子表格渲染

对于表格在前端的渲染，我们都知道前端复杂的DOM，会加重浏览器渲染负担，而表格这种密集的数据展示形式必然会需要大量的DOM来呈现内容。

点击获取SpreadJS工具下载

在表格渲染方式上，我们从一开始就采用了HTML 5 Canvas绘制的方式。

我们把Canvas称之为画布，因为整个画布就是一个DOM。这样不仅解决了因界面复杂而导致的DOM元素过多的问题，更是打破了DOM元素渲染对UI的诸多限制，例如线形，特殊图形等，通过画法逻辑，更加精准的UI界面渲染，同时还解决了浏览器兼容性的问题。

这种Canvas渲染的方式可以说是现在前端渲染这种内容丰富表格、图表的主流方式。

在绘制时我们采用了分层绘制。整个绘制引擎根据油画绘制原理，分为主体图层和装饰图层，主题图层将会渲染持久的，不会轻易改变的元素，例如背景，单元格，表格线等。而装饰图层则会渲染常变性元素，例如选择框，拖拽框，悬浮效果等。

另外，整个的绘制过程并不是从数据层（Model）直接到视图层（View）的。我们根据表格内容的特殊性，实现了根据视图层形状，从数据层组合出一层专属视图层的视图数据（ViewModel），在配合以上的双缓存画布绘制机制，完成整个表格按需绘制的需求，并缓存绘制结果，进一步提升绘制性能。

主体图层不是直接绘制在用户能看到的主画布上，而是绘制在一个看不见的缓存画布上。在需要渲染时，只需要讲缓存画布的内容克隆到主画布上，再附加上装饰图层元素。这样，当表格需要更新时候，比如单元格背景改变，只需要在克隆缓存画布后重绘对应单元格内容即可。

再以表格滚动演示下双缓存画布带来的优势。

当表格滚动结束，需要重绘，我们会将主画布清空，从缓存画布中根据行为上下文进行画布偏移，将偏移后的图层直接绘制在主画布上，随后在主画布上绘制偏移后的剩余部分，最后更新缓存。使用缓存画布，大大提升了绘制性能，使整个滚动过程更加流畅、顺滑。

SpreadJS | 下载试用

纯前端表格控件SpreadJS，兼容 450 种以上的 Excel 公式，具备“高性能、跨平台、与 Excel 高度兼容”的产品特性，备受华为、苏宁易购、天弘基金等行业龙头企业的青睐，并被中国软件行业协会认定为“中国优秀软件产品”。SpreadJS 可为用户提供类 Excel 的功能，满足表格文档协同编辑、 数据填报、 类 Excel 报表设计等业务场景需求，极大的降低企业研发成本和项目交付风险。

本文转载自葡萄城