纯前端表格控件SpreadJS V14.0发布:组件化编辑器+数据透视表

葡萄城 2020-11-10 12:04:43
前端 表格 控件 spreadjs v14.0


SpreadJS 是一款基于 HTML5 的纯前端表格控件,兼容 450 种以上的 Excel 公式,具备“高性能、跨平台、与 Excel 高度兼容”的产品特性,可为用户提供高度类似 Excel 的功能,满足 Web Excel组件开发、 表格文档协同编辑、 数据填报、 类Excel报表设计等业务场景需求,极大的降低企业的研发成本和项目交付风险。

产品自面市以来,备受华为、苏宁易购、天弘基金、远光软件等各领域龙头企业的青睐,并于2020年被中国软件行业协会认定为“中国优秀软件产品”。

image.png

日前,SpreadJS 正式发布V14.0版本。从该版本开始,SpreadJS推出了数据透视表功能,进一步降低企业数据分析的门槛,提升系统数据处理的能力。

此外,SpreadJS 还在 V14.0中发布了组件化的在线表格编辑器,提供了更易嵌入、秒级加载、灵活定制的功能。在线表格编辑器可与SpreadJS 集成,助力开发者在主流前端 JS 框架中,实现高性能的模板设计、在线编辑、填报和数据绑定等功能。

在详细介绍SpreadJS V14.0的新特性之前,请同步下载体验:

纯前端表格控件SpreadJS V14.0下载

SpreadJS V14.0 新特性介绍

1\. 数据透视表:完美再现Excel 强大的数据分析能力

作为一款功能布局与 Excel 高度类似的纯前端表格控件,SpreadJS不但兼容了450 种以上的 Excel 公式、32 种图表和 18 种迷你图,还在此版本中正式推出数据透视表功能。

image.png

(SpreadJS的数据透视表)

如上图所示,SpreadJS的数据透视表已具备了 Excel 透视表的绝大部分功能,包括透视面板、透视表字段、筛选器、值字段设置、数据排序、分类汇总等。

通过50万行数据测试,SpreadJS 的数据透视表仍表现出极高的数据处理性能,所有操作在527毫秒内即可执行完毕。

image.png

2\. 组件化的在线表格编辑器:更易嵌入、秒级加载、灵活定制

在线表格编辑器作为 SpreadJS 的增强组件,可轻松嵌入各类前端页面,内置开放的 API 和类 Excel 的 UI 设计元素,助力开发者在 Angular、Vue、React 等前端 JS 框架中,实现高性能的模板设计、在线编辑/填报和数据绑定等功能,并为最终用户带来高度类似 Excel 的使用体验。

在 V14.0版本中,SpreadJS推出了基于组件化设计架构的在线表格编辑器,该编辑器以 Dom 作为容器,通过前端组件的形式发布,可以在本地下载试用,无任何功能限制。

点击此处,下载SpreadJS 组件化表格编辑器

组件化的在线表格编辑器具备如下优势:

  1. 应用方式更灵活

image.png

(组件化的设计架构,应用方式更灵活)

  1. 更易嵌入、移植

image.png
(不依赖任何第三方类库)

  1. 体积更小,秒级加载

image.png

(体积不到 4 MB,秒级即可完成加载)

  1. 定制更容易,交互更丰富

image.png

(用声明式语法代替 HTML 源代码,定制更容易)

3\. 公式函数:支持迭代计算,加入XMatch & XLookup、LET 等新函数

SpreadJS在当前版本中支持了迭代计算,即可通过一个递推公式反复校正设定的初始近似值,直至达到预定精度要求为止,具体实现如下所示:

image.png
(SpreadJS的迭代计算功能)

image.png

(迭代计算的实例演示)

除了迭代计算,SpreadJS 还在当前版本中加入了XMatch & XLookup,以及LET函数

image.png

(SpreadJS 的 XMatch & XLookup函数)

image.png

(SpreadJS 的 LET函数)

4\. 导入导出:支持渐进加载、HTML 导出

在当前版本中,SpreadJS 不仅可直接在浏览器中完成 Excel、CSV、JSON 等文件的导入导出、PDF 导出、打印及预览操作,还加入了渐进加载、HTML 导出等更多新功能。

image.png

(SpreadJS 的 HTML 导出功能)

5\. 单元格:支持渐进填充、多列选择

SpreadJS已支持单元格渐进填充效果,可实现多列选择、行列头支持公式函数以及迷你图等功能。

image.png

(SpreadJS 的渐进填充效果)

image.png

(SpreadJS 的行列头支持公式及迷你图)

6\. 数据可视化:新增漏斗图,支持图表轴交叉属性

SpreadJS在当前版本中新增了漏斗图类型,并支持图表模板填充、GapWidth & Overlap 调整、环形图的 holeSize 属性调整,以及图表轴交叉等新功能。

image.png
(SpreadJS 的漏斗图)

image.png

(SpreadJS 的图表模板填充效果)

image.png

(SpreadJS 的图表轴交叉功能)

image.png

(SpreadJS 的GapWidth & Overlap 调整效果)

image.png

(SpreadJS 的holeSize 属性调整效果)

以上就是纯前端表格控件SpreadJS V14.0的主要功能介绍,如需了解更多新版本信息,欢迎访问SpreadJS 产品官网

版权声明
本文为[葡萄城]所创,转载请带上原文链接,感谢
https://segmentfault.com/a/1190000037784116

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple