把整个工作簿存成一个文件:SpreadJS 中 ssjson 的导入与导出

简介: SpreadJS 提供原生 ssjson 格式,通过 `toJSON`/`fromJSON` 一键保存/恢复完整工作簿(含公式、样式、冻结窗格等),避免刷新丢失或模板重建。纯文本、可 diff、易存储,支持草稿暂存、模板分发、审批归档等场景,前端几十行代码即可实现可靠持久化。

用户在浏览器里花四十分钟填完一张预算表,手指一滑碰到了刷新键。页面回到初始空白,输入、批注、调过的格式一起消失——如果系统没留"完整保存"的退路,这就是每次都会重演的事故。另一头,管理员做好了一套带公式和样式的报表模板,希望分支系统能直接加载,而不是照着文档手工重建。

这两个问题指向同一种能力:把整个工作簿连同全部状态打包成一个文件,需要时原样恢复。SpreadJS 为此提供了原生 ssjson 格式,核心是 Workbook 上的 toJSON 与 fromJSON 一对方法。

为什么这个细节重要

一张工作表远不止"格子里的值"。公式、样式、合并区域、冻结窗格、条件格式、数据校验,都是工作簿状态的一部分。若持久化方案要求把这些逐项拆开存库,就要为每类对象设计表结构、写转换代码,日后还得跟着维护。漏掉一项,恢复出来的表就和原来不一样,而且往往要到用户用到那一步才暴露。

ssjson 把问题简化成"一个对象、一个文件":它是 SpreadJS 的原生 JSON 序列化格式,纯文本、可直接交给后端存储。导出的不是截图式的结果,而是可继续编辑、可重新计算的活的工作簿。

SpreadJS 的实现思路

导出一侧,spread.toJSON() 把当前工作簿序列化为 JSON 对象,转成字符串后包成 Blob,再借助一个临时的 <a download> 元素触发浏览器下载:

function exportSsjson() {
    let fileJson = JSON.stringify(spread.toJSON());
    let eleLink = document.createElement('a');
    eleLink.download = 'test.ssjson';
    let blob = new Blob([fileJson]);
    eleLink.href = URL.createObjectURL(blob);
    document.body.appendChild(eleLink);
    eleLink.click();
    document.body.removeChild(eleLink);
}

导入一侧走标准文件读取流程:文件选择器拿到用户选中的文件,FileReader.readAsText(file, "UTF-8") 读成文本,JSON.parse 还原成对象,交给 spread.fromJSON(jsonObj),页面上的表格即刻变成文件里的样子。

几处值得注意的细节:

  • 这对方法属于核心包,不依赖任何 I/O 插件;若目标是从 .xlsx 等二进制 Excel 文件导入,才需要另行引入 I/O 插件;
  • toJSON 支持序列化选项,如 ignoreFormula、ignoreStyle 可按需剥离公式或样式,做"只发结构"的空模板很方便;fromJSON 对应支持 doNotRecalculateAfterLoad 等反序列化选项;
  • 加载较大文件时,把 fromJSON 包在 suspendPaint() 和 resumePaint() 之间可避免中间态反复重绘;
  • 调试残留和固定文件名进入生产前应移除或改为动态命名,并补上校验与异常处理。

可以扩展到哪些场景

  • 模板中心:总部维护 ssjson 模板文件,各业务系统加载后填充数据;
  • 草稿与暂存:把序列化结果定时写入本地或服务端,防误关误刷;
  • 审批归档:提交时留存工作簿快照,事后可完整重现当时的表样和数据;
  • 版本对比:JSON 是纯文本,两次保存之间的差异可以直接 diff;
  • 离线场景:断网时导出 ssjson 带走,恢复网络后再导回系统。

给开发者的关键词

GC.Spread.Sheets.Workbook.toJSON / fromJSON、ssjson(SpreadJS 原生 JSON 序列化格式)、FileReader.readAsText、JSON.parse、Blob 与 URL.createObjectURL、a 标签 download 属性、序列化选项 ignoreFormula / ignoreStyle / doNotRecalculateAfterLoad、suspendPaint / resumePaint、JavaScript 电子表格控件。

小结

表格系统的持久化不必从零设计。工作簿级的序列化让"保存"回到最朴素的语义:导出是一个文件,导入是恢复现场。数据、公式、样式一体带走,前端几十行代码就能搭出存取闭环。

相关文章
|
22天前
|
存储 人工智能 监控
阿里云百炼免费Token领取攻略、领取后使用、免费Token用完了怎么办?问题解答都在这!
本文详解阿里云百炼新人免费Token领取方式、7000万额度规则、90天有效期、模型独立抵扣范围,以及如何查剩余额度、开启“用完即停”防扣费等功能,附控制台操作指引与FAQ。在阿里云百炼官网:https://t.aliyun.com/U/fPVHqY 免费领取千万Tokens
|
22天前
|
存储 数据采集 人工智能
一本 Agent 白皮书,值得连续写两年么?
Alibaba Cloud AI Agent Handbook 即将开源。
|
22天前
|
API 数据库 UED
网页端实现AutoCAD的多段线功能和API调用
本文详解多段线(Polyline)核心概念与Web端PLINE命令复刻:涵盖顶点、凸度(控制直线/圆弧)、宽度(等宽/渐变)三大要素,基于mxcad实现交互式绘制,支持直线/圆弧混合、实时预览、Ctrl翻转方向、回退闭合等功能,精准对标AutoCAD体验。(239字)
|
21天前
|
供应链 前端开发 BI
当报表区域开始 动 :一个决定 Web 表格专业感的细节
本文揭示Web表格在容器动画(如收起侧栏、拖拽分屏)中因Canvas渲染与布局不同步导致的错位残影问题——看似微小,却持续侵蚀用户信任。指出根源在于画布不感知容器渐变,并给出`refresh()`+`ResizeObserver`等轻量、可沉淀的工程解法,强调这是高性能表格落地的必修课。(239字)
|
21天前
|
Web App开发 JavaScript 前端开发
2026 年 HTML 迎来重磅进化
2026年HTML迎来重大进化:原生3D模型(`&lt;model&gt;`)、语义化权限元素、可深度定制的`&lt;select&gt;`、HTML-in-Canvas混合渲染、声明式PWA安装、Scoped Web Components及零JS交互指令,大幅降低JS依赖,提升性能与可访问性。(239字)
2026 年 HTML 迎来重磅进化
|
22天前
|
小程序 前端开发 Android开发
商城小程序商品详情页加载慢怎么办?2026 前端性能优化实战
从图片、接口、渲染三个维度拆解商城小程序商品详情页的性能优化:首图压缩到150KB以内、接口拆分、长图文分段渲染,附首屏耗时从5.8s降到1.9s的实测数据。
|
22天前
|
人工智能 测试技术 定位技术
当下测试工程师最容易混乱的5个技术方向:Agent、Harness、MCP、RAG、知识图谱
近期AI测试技术爆发式增长,Prompt、Agent、RAG、MCP等概念令人目不暇接。本次公益训练营聚焦“智能测试用例生成”真实场景,9月22–23日两天,串联大模型、智能体、知识检索与工具调用,助测试工程师构建系统性AI测试思维。
|
22天前
|
前端开发 JavaScript BI
SpreadJS 设计器做容器缩放动画:两种渐进刷新的实现思路
本文解析SpreadJS Designer在CSS宽度过渡中错位的成因:Canvas控件不响应渐变尺寸。提出两种可靠刷新方案——监听`transitionend`或定时`refresh()`,并可扩展至折叠栏、分屏等场景,助你实现流畅无破绽的动效体验。(239字)
|
22天前
|
数据采集 JavaScript 前端开发
Ctrl+V 只带走值和公式:用 ClipboardPasting 事件重写 SpreadJS 的粘贴行为
月底合并费用表最怕格式污染!SpreadJS通过`ClipboardPasting`事件拦截粘贴,仅保留值与公式,自动剥离颜色、字体等样式,既尊重用户Excel习惯,又保障模板整洁与数据可控。十几行代码,实现Web端“选择性粘贴”。
|
22天前
|
存储 JSON Java
设备管理系统为什么总变成新的数据孤岛?——ERP/WMS/财务集成与身份打通
本文为设备管理系统系列第8篇,聚焦“集成与身份”核心议题。面向制造业IT负责人等读者,剖析设备系统沦为新孤岛的根源,强调集成非加分项而是必答题。详解ERP/WMS/财务三大优先接口、四层集成能力、SSO单点登录及组织同步,并指出同平台集成成本优势。强调:打通才是系统,不打通只是模块。