即将见面:SpreadJS V16:重大改进

news2024/11/24 13:25:56

内容摘自互联网:::::::

新功能背景:
在SpreadJS V16之前,关于文件toJSON()之后,生成的json文件太大,一直被很多客户诟病。例如,同样一个文件,导出Excel文件只有几KB,而导出的JSON文件会有几MB。这直接导致的问题有:


(1)导出文件太大,前后端传输消耗带宽,占用存储空间;
(2)toJSON()时间过长,导致浏览器无法去做其它事情,只能一直等待,影响客户体验及性能。

为解决上述问题,SpreadJS V16设计了一种新的JSON文件格式(SJS),减小JSON文件体积,提升客户的使用体验。与原始excelIO导入/导出文件不同,spreadJS V16提供了一个名为“IO”的插件。它不仅支持excelIO已经支持的所有模块,还可以很好地支持大文件的导入/导出,同时提供了一种为大文件部分加载工作表的方法。

可以看出,V16在SpreadJS与Excel文件格式转换之间仅需要一步,在这个步骤中产生的文件格式就是V16新的文件格式SJS,而V16之前在SpreadJS与Excel文件格式转化时则需要两步。新的SJS文件格式是一个压缩文件。其中包含一些小的sjsjson文件,与Excel的xml结构类似。

 


对于老版本的ssjson文件,SpreadJS会继续支持,因此也不需要担心产品升级后造成老版本的文件不可用。对于新的sjs文件格式,在在线表格编辑器中,操作如下图所示:



这里我使用的文件是之前客户提供的一个导入很慢的大文件,经过测试,老版本的文件格式导入需要43s,而新版本的文件格式导入仅需2s,今后客户再也不会吐槽文件导入慢了。在导出时,除了可以选择导出Excel文件、SSJSON文件,V16新增的就是上图中演示的SJS文件,在导入操作中,也同时支持了SJS格式的文件导入。但是需要注意的时,V16导出SJS时,对集算表及密码部分并没有提供支持,后期产品会继续开发这些模块,让我们一起期待吧。

以上讲解的都是UI上的操作行为,文章最后,我们一起来了解一下导入导出SJS文件的代码编写。
1. 引入导入导出SJS文件相关的IO插件

  1. <script src="plugins/gc.spread.sheets.io.xxx.js"></script>

2. 导入SJS文件

  1. spread.open(fileBlob, function () {
  2.    // success callback to do something
  3. }, function (e) {
  4.   console.log(e); // error callback
  5. }, { incrementalLoad: true })

3. 导出SJS文件

  1. spread.save(function (blob) {
  2.    // save blob to a file
  3.    saveAs(blob, fileName);
  4. }, function (e) {
  5.    console.log(e);
  6. })

最后,需要提醒的是,V16之后Excel,SSJSON,CSV文件不再使用open和save方法,而是统一改用import及export方法。这样做可以对不同文件提供统一入口支持,降低客户编程复杂度。详细的代码示例如下:
1. 导入文件

  1. spread.import(fileBlob, function () {
  2.    // success callback to do something
  3. }, function (e) {
  4.   console.log(e); // error callback
  5. }, { incrementalLoad: true })

2. 导出文件

  1. spread.export(function (blob) {
  2.    // save blob to a file
  3.    saveAs(blob, fileName);
  4. }, function (e) {
  5.    console.log(e);
  6. }, GC.Spread.Sheets.ExportFileType.excel, {});

相关的导出文件枚举类型如下:

  1. export enum ExportFileType {
  2.     /**
  3.     * Export excel type file.
  4.     */
  5.     excel = 0,
  6.     /**
  7.     * Export ssjson type file.
  8.     */
  9.     ssjson = 1,
  10.     /**
  11.     * Export csv type file.
  12.     */
  13.     csv = 2
  14. }

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/28231.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

PySide创建界面关联项目(五) 百篇文章学PyQT

本文章是百篇文章学PyQT的第五篇&#xff0c;本文讲述如何使用PySide创建UI界面&#xff0c;并且关联入PyCharm 新建的项目中成功运行第一个PyQT程序&#xff0c;博主在本篇文章中将遇到和踩过的坑总结出来&#xff0c;可以供大家参考&#xff0c;希望大家安装顺利。包括 安装、…

我的Vue组件化开发首个项目todolist

TodoList 学习笔记&#xff1a; 总结TodoList案例 1.组件化编码流程: (1).拆分静态组件:组件要按照功能点拆分&#xff0c;命名不要与htm|元素冲突。 (2).实现动态组件:考虑好数据的存放位置&#xff0c;数据是一个组件在用&#xff0c; 还是一些组件在用: . 1).-个组件在…

Vue简单实例——从webpack到vue,再到weex

这一章节&#xff0c;我们主要针对从webpack&#xff0c;vue&#xff0c;weex的框架结构上来说明对比这三个框架的区别 主要功能&#xff1a; webpack&#xff1a; webpack是前端项目工程化的具体解决方案。 它提供了友好的前端模块化开发支持&#xff0c;以及代码压缩混淆&…

基于身份的分段:三种技术路线解析与建议

SmartX 趋势分享 SmartX 趋势分享由 SmartX 团队内部分享的权威机构市场报告、全球重要媒体文章精选整理而成。内容涉及现代数据中心相关产业趋势以及金融、医疗、制造等行业全球用户需求与实践前沿洞察。在“零信任实践”系列的第一篇文章中&#xff0c;我们介绍了两种实现零信…

基于springboot“漫画之家”系统设计与实现-计算机毕业设计源码+LW文档

摘 要 随着信息技术和网络技术的飞速发展&#xff0c;人类已进入全新信息化时代&#xff0c;传统管理技术已无法高效&#xff0c;便捷地管理信息。为了迎合时代需求&#xff0c;优化管理效率&#xff0c;各种各样的管理系统应运而生&#xff0c;各行各业相继进入信息管理时代&a…

vue3+ts部分场景示例

模板语法 插值变量 div{{插值}}div const message: number 84; 指定变量为数字类型 const message: string小明 ; 指定字符串类型 const message: booleanfalse ; 指定布尔值类型 const message: any小明 ; any指定任意类型 const message: object{} ; 指定对象…

代码随想录算法训练营第七天|二叉树(截止到层序遍历)

二叉树的递归遍历 递归遍历是最简单的 // 前序 class Solution { public:void traversal(TreeNode* cur, vector<int>& vec) {if (cur NULL) return;vec.push_back(cur->val); // 中traversal(cur->left, vec); // 左traversal(cur->right, vec); //…

【高级篇】线程与线程池

一、线程回顾 1、初始化线程的 4 种方式 1&#xff09;、继承 Thread public static class Thread01 extends Thread{Overridepublic void run() {System.out.println("当前线程&#xff1a;"Thread.currentThread().getId());int i 10 / 2;System.out.println(&qu…

web前端期末大作业——HTML+CSS简单的旅游网页设计与实现

&#x1f468;‍&#x1f393;静态网站的编写主要是用 HTML DⅣV CSSJS等来完成页面的排版设计&#x1f469;‍&#x1f393;&#xff0c;一般的网页作业需要融入以下知识点&#xff1a;div布局、浮动定位、高级css、表格、表单及验证、js轮播图、音频视频Fash的应用、uli、下拉…

项目上云实战:如何把Java项目搬上云服务器?

1.中小型企业项目开发完成后应如何运行&#xff1f; 最近在后台私信中&#xff0c;很多小伙伴问询博主&#xff0c;中小企业项目开发完成后&#xff0c;是否在pc机上直接运行。答案是否定的&#xff0c;专业的软件开发企业都会选择linux服务器作为运行环境&#xff0c;企业服务…

[附源码]java毕业设计学生档案管理系统论文

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

基于java+springboot+mybatis+vue+elementui的毕业生信息招聘平台

项目介绍 随着我国教育改革的重大发展&#xff0c;越来越多的人都有了机会接受高等教育&#xff0c;同时每个大学生在毕业的时候都面临着一个重要的问题&#xff0c;那就是如何进行就业和找工作的问题&#xff0c;为了能够帮助更多的大学生找到适合自己的工作&#xff0c;我们…

m基于matlab的DQPSK调制解调技术的仿真

目录 1.算法概述 2.仿真效果预览 3.MATLAB部分代码预览 4.完整MATLAB程序 1.算法概述 4进制的DPSK通常记为DQPSK。DQPSK信号编码方式如下表&#xff1a; 表中 θk是相对于前一相邻码元的相位变化。共有A、B两种方式。B方式中相邻码元间总有相位改变&#xff0c;故有利于在…

卡尔曼滤波器

卡尔曼滤波器 参考资料&#xff1a;https://www.bilibili.com/video/BV12P411V7pc/?spm_id_from333.337.search-card.all.click&vd_source2f16c81b2e6b252c304116c646e6512c 卡尔曼滤波器是线性滤波器 在这里插入图片描述 状态预测公式&#xff1a; x^t−Ftx^t−1Btut\h…

个人信息保护法vs国家标准,37项标准为个人信息加道“安全锁”~(附整理文档及pdf下载)

如何防止个人敏感信息“过度采集”&#xff1f; 如何禁止“大数据杀熟”&#xff1f; 如何避免“个性化服务”泄露隐私&#xff1f; 2021年11月1日&#xff0c;《中华人民共和国个人信息保护法》生效施行&#xff0c;为我们在网上冲浪时守护个人隐私安全。《个人信息保护法》…

HTML静态网页作业html+css+javascript+jquery水果商城7页

常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A…

怎么把Epub转换成PDF格式?分享两种简单好用的转换方法

怎么把epub格式的文件转换成PDF文件格式呢&#xff1f;这两种文件格式大家在下载文件的时候可能会经常遇到&#xff0c;PDF文件格式自然不用多说&#xff0c;这是大家办公必备文件&#xff0c;但是epub格式的文件是一种电子书格式的文件&#xff0c;很多小伙伴用不习惯&#xf…

Linux基本指令(一)

文章目录Linux常用基本指令1. ls2. pwd3. cd4. touch5. tree6. mkdir7. rmdir8. rm9. man10. cp11. mv12. cat13. echo14. wc15. more16. less17. head18. tail19. date20. cal21. sort22. uniq23. find24. which25. whereis26. alias27. grep28. zip/unzip29. tar30. bc31. un…

MyBatisPlus入门学习笔记

目录 学习笔记 SQL文件 练习类 其他知识点 yaml配置文件 代码生成器 学习笔记 SQL文件 SQL SET NAMES utf8mb4; SET FOREIGN_KEY_CHECKS 0; -- ---------------------------- -- Table structure for user -- ---------------------------- DROP TABLE IF EXISTS u…

图/图的存储/图的遍历

图的概念&#xff1a;图的数据结构由两个集合构成&#xff0c;一个是顶点集V (vertex)&#xff0c;一个是边集E&#xff08;Edge&#xff09;&#xff1b;无向图一般记为G(V , E) &#xff1b;有向图记为 G<V&#xff0c; E> 有向图就是边的指向是有方向区分的&#xff…