WASM 打包的 Office 方案，解决 Web 端需求新思路

[chaxus]

2021 年工作时，参与过一个在线教育项目（教学资源平台），需要实现 Office 文档的 Web 预览和编辑。

当时调研了文件格式解析、微软/谷歌的预览链接、LibreOffice 、kkFileView 等转换等方案，发现这一块还是挺麻烦的。

不过好在后面因为众所周知的政策原因，部门没了，所以就算啦。

但后来发现这类需求其实很常见，Office 三件套是办公刚需。不过优先级往往不高：“能在线看最好，不能就下载呗，又不是不能用”。

后面还见过有大佬手动实现 PPTX JS 解析的。

最近发现新思路：有人将 OnlyOffice 构建成 WASM ，直接打包到 Web 端运行。

尝试了一下效果还可以，只不过 WASM 有点大，Web 上加载需要点时间。不过省掉了服务器资源，在降本增效的大环境下友好。

https://github.com/ranuts/document

如果有遇到类似的业务场景，可以考虑考虑 WASM 这种方向。

[sujin190]

这效果，非常可以了

[putaozhenhaochi]

50 多 M 😂

[chaxus]

@putaozhenhaochi 毕竟打包了 onlyoffice 😂

[chaxus]

@sujin190 是哇，纯 Web 能做到这种程度还是挺神奇的。于是来给 v 友分享分享。

[netnr]

没有算字体，字体现在依赖的是 360 的域名，常用字体包近 200M ，支持的越多越大

[netnr]

另外提个建议，wasm 能拆包？小于 25M 最好，Cloudflaer Pages 就限制单文件不能超过 25M

[Kokomashiro]

厉害厉害，前段时间刚好也因为业务在研究这个，后来算是卡住了就先搁置了。

[murmur]

WASM 是最简单的问题，目前能用在大型企业的 web 版，不要 office ，就只能选 wps 文档中台，libreoffice 用过，还是 exe 版的，被财务那堆报表和图表教育的爹妈不认

[MEIerer]

牛哇

[BrandonXu]

@chaxus 哥们儿？你这个开源库，用于商业项目，且闭源，可以用吗？

[chaxus]

@BrandonXu 有点困难，毕竟 onlyoffice 官方的 [sdkjs]( https://github.com/ONLYOFFICE/sdkjs) 和 [web-apps]( https://github.com/ONLYOFFICE/web-apps) 是 AGPL-3.0 license 协议
1. 如果只是内部使用，允许闭源。
2. 如果提供 SaaS 服务或者进行销售，那就得开源。
AGPL 不禁止商业盈利，但要求共享改进成果。

[chaxus]

@netnr 好的，我对 wasm 进行 br 了一下，现在只有 8.9 M 了。处理了一下 br 文件的加载。现在加载速度变快了很多。

[ajan]

太牛了

[BrandonXu]

@chaxus 老哥，你这个库 ranuts/fileview 用不了了，给你提了个 bug ，有空看一眼？ https://github.com/ranuts/fileview/issues/2
包括你官网上的那个例子也报错了 https://chaxus.github.io/ran/src/ranui/preview/

[chaxus]

@BrandonXu #14 看到啦，以及回复：
- 看报错是网络错误。访问这个试试，看看多久下载下来？ https://ranuts.github.io/document/wasm/x2t/x2t.wasm 。
- 预览的服务是部署在 github page 上的。
可以 fork 项目： https://github.com/ranuts/document ，然后自己就近部署，部署方式可以参考项目的 CI 流程。这样访问会快一点。
- fileview 组件支持指定预览服务的域名，毕竟访问 github page 链接很慢或者链接不上，在某些地区很常见。

[chaxus]

@BrandonXu #14 但 request timeout 确实是代码里面主动限制的最长时间，这个我改改，把限制时间加长。
可以等资源加载完成，刷新页面再访问一次，毕竟二次访问有了 disk cache ，应该会快点，就可以了。不要关闭网页的缓存。毕竟 wasm 有 50 多 M 。