在线表格编辑器动态切换语言文件

收藏

本帖最后由 Joestar.Xu 于 2023-9-18 12:27 编辑

背景：
在线表格编辑器的使用场景中，我们经常遇到需要根据不同的语言环境，动态切换语言资源文件的情况。本教程将为您讲解在线表格编辑器如何切换语言文件。

解决方案：
首先，在线表格编辑器的各个资源文件是一个个json对象，第一步我们需要对不同的资源文件对象进行缓存。在这个过程中我们也可以对这些文件对象进行修改，从而生成自定义的语言资源包（在线表格编辑器支持中，英，日，韩四国语言，如果需要其他语言就需要对资源的对象进行定制）。通过

GC.Spread.Sheets.Designer.getResources();

复制代码

获取对应的资源文件json并手动进行缓存，可以将获取到的内容手动保存在文件中。
image.png674703063.png

具体可以像示例附件resource.js文件这样保存成一个文件，也可以分开保存。
接下来，按照对应的语言将对应的resource内容通过setResources方法进行设置。

GC.Spread.Sheets.Designer.setResources(resource);

复制代码

最终，通过setConfig去更新上方菜单

designer.setConfig(config);

复制代码

如下图demo所示，当选择zh-CN时，下方菜单以中文显示：
image.png486147460.png

切换为ja-JP时，下方菜单更改为日文显示：
image.png674189452.png

延伸：
上述第三步，需要通过setConfig方法去刷新，如果菜单中存在定制化的按钮或内容，那么刷新之后内容将如何保留？
1.config的设定一定要在setResource之后（第一次初始化加载由于内置读取了resource的设置，所以不用担心上述冲突）。故而每一次更新resource都需要重新设置一遍config。
2.config需要从GC.Spread.Sheets.Designer.DefaultConfig获取，因为setResource之后会更改GC.Spread.Sheets.Designer.DefaultConfig，更换其为新的resource下的config配置文件。
如demo中所示，当切换了resource之后，执行了如下代码

GC.Spread.Sheets.Designer.setResources(eval(value));
var newConfig = initConfig(GC.Spread.Sheets.Designer.DefaultConfig);
designer.setConfig(newConfig);

复制代码

首先，通过setResources设置了对应的resource文件。
接下来通过GC.Spread.Sheets.Designer.DefaultConfig获取对应的config配置并传入initConfig方法，initConfig方法中对config进行定制化处理，并返回定制化之后的config。
最后，通过designer.setConfig重新刷新顶部菜单。
Demo：
该示例完整demo见附件