一、前言
最近项目上有个需求要实现在前端将内容转成word导出的功能，经过一番调研尝试下面这几个库，这里简单做一下总结：
docx文件其实是一个压缩包，当你把文件后缀改为.zip后解压缩，就会发现咱们编辑的内容本质上都是一些xml文件，也就是说平时用到的word/wps等软件也可以理解为一个xml文件可视化编辑工具！
offic文件的xml内容都遵循同一套标准Microsoft Office Open XML ，也就是说无论用什么方式，只要生成符合对应标准的文件，那么word/wps就都能正常使用。相关工具库其实也都是在基于这个标准进行xml内容的解析或生成。
docxtemplater (3.3k)：基于模板，通过替换变量的方式生成文件，也就是只要先写好模板文件，能够实现100%还原word格式文件效果。特别适用于实现提供了固定文件模板的导出需求。officegen (2.7k): 基于json配置或自定义代码控制生成内容，可以支持docx\pptx\xlsx多种格式。这里我只尝试过导出docx，就我个人体验来说，api相对来说比较精简易上手，如果只是涉及到简单的文本样式效果，首推这个，几分钟就上手解决问题~docx.js (4.8k)：基于代码控制生成内容，文档详细，几乎提供了所有docx常用功能，个性化配置项非常丰富，满足了我的所有需求！最终项目中选择的也是这个库。
二、定位问题
在开发的正起劲的时候发现，按文档描述使用api导出word评论只显示占位区域，无法正确加载图片！按文档描述任何知乎在段落中支持的功能，在评论中都应该可以使用。
于是我解压并打开了xml文件尝试排查原因，最终发现了端倪
在这个错误的xml文件中，图片引用部分是的直接解析成了文件名称
而正确的xml文件中图片资源应该是在comments.xml.rels文件中描述rid和资源路径的引用关系，comments.xml中使用对应的rid
所以想要支持在评论区中导出图片，我就需要做两个方面的改动
- 生成一个
comments.xml.rels文件 - 替换
comments.xml中的图片引用字段
三、解决问题
阅读源码发现，虽然作者并没有处理comment图片资源等相关的代码，但是存在生成document.xml.refs文件的相关逻辑可以参考实现，这不就直接就有了思路！
- 构建资源引用关系。在评论类中，添加了一个引用关系来保存图片引用
- 处理
comments.xml文件信息。这里直接参考原本docmentXmlData的处理过程来处理commentXmlData。
生成comments.xml文件的时候同样参照生成docment的方式，实现图片资源索引的关键字符替换。
- 将评论相关的图片资源数据处理生成
comment.xml.refs文件。
- 修改demo文件测试。找到原本用来测试comment功能的测试文件，引入图片再进行导出测试检查功能正常，完结撒花！
- 给项目提交pr，具体流程我就不多赘述了，可参考下面这篇文章: 如何给一个github项目提pr
四、总结
通过实现这个需求，浅入了解了下word文档规范，并且也尝试给开源项目提交了第一个pr，为开源做出一份自己的贡献。最后如果有其他更好用的docx生成库，也可以分享一下~
ps：js生态里office相关的工具库和后端比成熟度还是差很多呀，各大厂的在线文档实现方案好像也都是在服务器生成，前端直接下载了。