找回密码
 立即注册

QQ登录

只需一步,快速开始

Clark.Pan 讲师达人认证 悬赏达人认证 SpreadJS 开发认证

超级版主

200

主题

9899

帖子

1万

积分

超级版主

Rank: 8Rank: 8

积分
15531

讲师达人悬赏达人微信认证勋章SpreadJS 认证SpreadJS 高级认证元老葡萄

Clark.Pan 讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2020-6-28 09:30  /   查看:3295  /  回复:0
GCExcel曾经是纯服务器端独立操作Excel的控件,但随着GCExcel越来越多被人熟知,也衍生出了一些综合的需求。其中前后端交互就是其中最常见的一种。既然是操作Excel那么,前端的表格展示对于SpreadJS控件来说是当然不让的。今天就讲一下GCExcel如何与前端的SpreadJS进行交互。首先,交互方式:
SpreadJS可以将前端表格转换成json格式文件(ssjson),也可以转换成xlsx格式的文件(Excel)。但是由于SpreadJS中存在很多独特的定制设置,这些设置Excel本身是不支持的,所以导出Excel无法继承这些设置。所以导出ssjson就成了更好的选择。而GCExcel是可以直接读取导出的ssjson。此处注意导出的ssjson内的格式顺序不能发生变化。并且支持的SpreadJS版本必须是V12以上。
接下来,如何进行交互:
首先,SpreadJS支持toJSON序列化,通过该方法可以将页面上整个workbook序列化成json,在序列化的过程中可以设置对应options来做一些特殊设置,然后通过JSON.stringify将json转换成对应的json字符串。
  1. var serializationOption = {
  2.        ignoreStyle: true, // indicate to ignore the style when convert workbook to json, default value is false
  3.        ignoreFormula: true, // indicate to ignore the formula when convert workbook to json, default value is false
  4.        rowHeadersAsFrozenColumns: true, // indicate to treat the row headers as frozen columns when convert workbook to json, default value is false
  5.        columnHeadersAsFrozenRows: true // indicate to treat the column headers as frozen rows when convert workbook to json, default value is false
  6.     }
复制代码
  1. var jsonstr = JSON.stringify(spread.toJSON(serializationOption));
复制代码
之后发送请求将得到的字符串传到服务器端,这里注意前后端的编码格式保持一致,避免出现转译现象。
接下来,服务器端先初始化workbook实例,然后通过workbook下的fromjson来导入对应的json字符串
  1. Workbook workbook = new Workbook();
  2. workbook.fromJson(jsonstr);
复制代码
反向操作也是一样。
前端发送请求至服务器端,服务器端用toJSON方法将workbook序列化成json字符串,然后将字符串返回。
  1. String jsonStr = workbook.toJson();
复制代码

前端接收返回后的请求后,用JSON.parse将返回的json字符串转换成json对象。
  1. var ssjson = JSON.parse(jsonStr);
复制代码
最后通过spread.fromJSON方法将json反序列化到页面上进行展示,反序列化的同时可以通过相关的options进行差异化设置
  1. var jsonOptions = {
  2.        ignoreFormula: true, // indicate to ignore style when convert json to workbook, default value is false
  3.        ignoreStyle: true, // indicate to ignore the formula when convert json to workbook, default value is false
  4.        frozenColumnsAsRowHeaders: true, // indicate to treat the frozen columns as row headers when convert json to workbook, default value is false
  5.        frozenRowsAsColumnHeaders: true, // indicate to treat the frozen rows as column headers when convert json to workbook, default value is false
  6.        doNotRecalculateAfterLoad: true //  indicate to forbid recalculate after load the json, default value is false
  7.     }
复制代码
  1. spread.fromJSON(ssjson, jsonOptions);
复制代码
通过ssjson作为前后端之间的桥梁,GCExcel可以与SpreadJS完美的结合在一起组成全栈的解决方案。例如当表格包含着大量公式计算的时候就可以让GCExcel在服务端进行公式计算,减轻前端压力。之后前端fromjson的时候通过ignoreFormula的设置来忽略公式,然后只将计算结果呈现在前端页面上进行展示。类似这样的场景在日后的生产开发中将越来越常见。



0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部