SpreadJS初始化时加载文件的实现方式

登录

本帖最后由 Wilson.Zhang 于 2025-10-29 17:10 编辑

试想这样一种场景：我们的服务集成了SpreadJS，希望访问SpreadJS时看到的不是空白的Workbook，而是包含了特定内容的Workbook。这是典型的初始化加载场景，可以在创建Workbook实例时完成数据渲染，数据源可以是文件中的内容，也可以是静态JSON。如果是静态JSON，Workbook:fromJSON()能够很方便地对其进行反序列化，弊端则是后期维护不变更新保存在代码上下文中的JSON数据，必须改写代码中的JSON数据。将JSON数据保存在文件中，程序运行启动时读取指定目录中的文件也可以渲染数据，而且文件的管理方式更高效，在程序运行期间可以热插拔式地修改文件目录中的文件内容，待需要时加载便可自动加载最新内容。而且，spread-sheets-io支持的IO对象也是文件，支持多种文件格式，包括自有格式ssjson和sjs，以及与Microsoft Excel和WPS兼容的xlsx格式。

fetch、axios、XMLHttpRequest是常用的Http请求技术，当然也可以访问托管在服务器文件目录中的指定文件，返回内容中包含了文件流Blob对象的Response对象，遵循了标准的Http协议。虽然Blob不是一般程序可以直接操作的文件对象，但可以将其转化为File对象（包含文件元数据）或者ArrayBuffer用于底层二进制数据操作）进行进一步处理。

有了上述SpreadJS和Http请求技术的支持，本文介绍如何在SpreadJS的Workbook实例初始化时加载文件数据。

Workbook:import()支持导入ssjson和xlsx文件格式，Workbook: open()则支持导入sjs格式，这两个API实际接收的参数是File对象，如图1所示。

图1. API参数列表

然而，fetch、axios、XMLHttpRequest访问所得的文件数据是Blob对象，是纯二进制数据，而非import能直接操作的File对象。File是Blob的子类，这层天然联结便允许将Blob对象封装为File对象。在封装过程中，需要参考原文件的媒体类型type和文件名称，文件名称的后缀名表征了文件格式，且后缀名必须与原文件后缀名相同，否则无法创建正常的File对象。如此一来，便可将File对象传递给import方法导入至SpreadJS中展现。同理，如果原文件是sjs文件，将创建所得的File对象传递给Workbook: open()方法即可导入，如图2所示。

图2. 导入File流程

上述流程对应代码如图3所示。

图3. 导入File代码

除了Workbook:import()和Workbook: open()这两个文件级别的IO方式外，Workbook:fromJSON()能够反序列化的目标对象是JSON对象。用户可以把Workbook对应的JSON数据保存在任意类型的文件中，在获取到文件对应的Blob对象后，由FileReader加载文件中的内容，并根据UTF-8编码格式对其进行解码，即可得到可读字符串，再进一步通过JSON:parse()解析得到Workbook对应的完整JSON对象，如图4所示。至此，Workbook:fromJSON()即可将这个JSON对象反序列化呈现在浏览器页面中。

图4. 反序列化JSON流程

如图5所示即反序列化JSON的代码。

图5. 反序列化JSON代码

附件中的demo集合了fetch、axios、XMLHttpRequest等三种请求技术，结合SpreadJS的IO特性实现了初始化加载文件。

		自动登录	找回密码
密码			立即注册

SpreadJS初始化时加载文件的实现方式

本帖子中包含更多资源

0 个回复