随着业务的迅速发展，线上用户协议的数量和频繁的修改需求不断增加，这使得协议的管理变得越来越复杂。为了解决这一挑战，我们进行了技术调研和深入讨论，提出了一种高效的协议管理和开发方案，旨在降低人力成本，提高性能和可扩展性。
一、背景随着业务规模的不断扩大，我们无法避免地需要创建和修改各种线上用户协议。然而，每次协议的修改都需要耗费相当数量的人力和资源。因此，我们急需寻找一种更高效的方法来管理和开发这些协议，以适应不断增长的需求。
二、调研为了找到合适的解决方案，我们进行了技术调研和比较。最初，我们考虑了两种主要选项：一是直接预览PDF和Word文档，二是将Word文档转化为静态页面。经过深入比较，我们得出以下结论：
技术方案比较技术方案 | 页面大小 | 性能 | 可扩展性 |
直接预览PDF和Word | 200KB左右 | 中 | 低 |
Word转化为静态页面 | 30KB左右 | 高 | 高 |
从上表可以看出，将Word文档转化为静态页面是更为优越的选择。这种方法不仅减小了页面的大小，提高了性能，还具备更高的可扩展性。
三、期望目标我们制定了一系列期望目标，以更好地满足协议管理和开发的需求：
- 通过后台管理所有协议，实时编辑和更新，确保协议的实时生效。
- 实现历史记录功能，允许回滚到以前的协议版本。
- 通过实时编辑功能，可以添加相关脚本文件，提高协议的可扩展性。
- 平台应支持跨团队使用，并通过数据隔离，确保不同团队的协议数据互不干扰。
这是协议管理平台的协议列表界面，它能够管理协议平台内所有已有协议。同时可以进行编辑和新增协议，并且提供了二维码预览的功能。
这是协议管理平台的协议编辑界面，它能够直接上传Word文档或在富文本编辑器中直接编辑内容。并且可以直接预览在APP内中的展示样式。
- 根据OpenXML规范，Word文档最终会转换成符合OpenXML规范的格式。然后通过XML标签映射为符合HTML规范标签。下面是一段通过OpenXML解析的word文档的一部分：
<w:document xmlns:w="https://schemas.openxmlformats.org/wordprocessingml/2006/main">
<w:body>
<w:p>
<w:r>
<w:t>Example text.</w:t>
</w:r>
</w:p>
</w:body>
</w:document>
Open XML | 说明 | 映射成HTML的含义 |
<w:document> | 表示整个 Word 文档 | document标签 |
<w:body> | 表示文档主体，包含了所有的内容。 | body标签 |
<w:p> | 表示一个段落。 | p标签 |
<w:hyperlink> | 表示一个超链接。 | a 标签 |
<w:tbl> | 表示一个表格。 | table标签 |
<w:r> | 表示一个运行元素，用于定义在段落中的一系列相邻的文本或其他内容。 | 连续文本节点 |
<w:t> | 表示纯文本内容。 | 文本节点 |
<w:color> | 表示颜色。 | 颜色相关的样式 |
更多OpenXML标签可以参考一下网址：https://learn.microsoft.com/en-us/dotnet/api/documentformat.openxml.wordprocessing?view=openxml-2.8.1&redirectedfrom=MSDN
- 根据上述映射关系，将XML转换为HTML相关的标签或者样式。最终形成HTML文档
- 解析Word文档：
- Word文档通常以二进制格式（.doc、.docx）存储，因此首先需要解析文档的二进制数据以提取文本、格式、图像和其他内容。
- 对于.docx文件，可以使用基于XML的OpenXML格式来解析文档内容。这种格式是一种开放标准，定义了如何将文档内容存储在一个ZIP压缩文件中，并使用XML来描述文档结构和内容。
- 提取文本和样式：
- 从Word文档中提取文本内容以及相应的样式信息，如字体、字号、颜色、段落格式等。
- 段落、标题、表格、图像等元素需要被适当地识别和提取。
- 转换文本格式：
- 将Word文档中的文本内容转换为HTML文本。这可能涉及到将段落、标题、列表等元素映射到HTML标记，例如<p>、<h1>、<ul>等。
- 样式信息需要映射到HTML和CSS，以确保文本在HTML页面上正确地呈现。
- 处理图像和媒体：
- Word文档可能包含插入的图像、表格和媒体文件，这些需要被提取并嵌入到HTML中。
- 图像通常被转换为<img>标签，而媒体文件可能需要使用HTML5标签（如<video>和<audio>）来嵌入。
- 处理超链接和书签：
- Word文档中的超链接和书签需要被转换成HTML中的超链接（<a>标签）或锚点（<a>标签的name属性）。
- 处理特殊元素和格式：
- Word文档中可能包含一些特殊元素，如注释、页眉、页脚、文档属性等，这些需要被适当地处理和转换。
- 嵌入CSS和样式：
- 将从Word文档中提取的样式信息映射到HTML和CSS，以确保文档在浏览器中的外观与原始Word文档一致。
- 处理复杂排版和表格：
- Word文档中的复杂排版和表格结构需要被适当地转换为HTML和CSS，以确保表现一致性。
下面按照前端较为常用的解析word的库为例，示例代码如下：
const mammoth = require("mammoth");
let FileInput = document.getElementById("file-input");
fileInput.addEventListener("change", function(event) {
let file = event.target.files[0];
let reader = new FileReader();
reader.onload = function(e) {
let arrayBuffer = e.target.result;
// 使用 mammoth.js 解析 Word 文档
mammoth.extractRawText({arrayBuffer: arrayBuffer})
.then(function(result) {
var html = result.value; // 转换后的 HTML
console.log(html);//可以对HTML进行进一步处理
})
.done();
};
reader.readAsArrayBuffer(file);//word文件转buffer
});
4-6. 遇到问题及解决方案
在平台开发过程中，我们也遇到了一些挑战，但我们找到了相应的解决方案：
问题1: Word上的字体和实际要用的字体不一致。解决方案：
- 通过解析生成页面的过程中，注入相关的字体样式，以确保字体一致性。
- 允许用户在页面上自行修改字体样式，以满足特定需求。
解决方案： 当出现这种需求时，开发人员可以通过编辑解析后的静态页面，手动添加所需的脚本文件，以满足业务要求。
现状目前，KOO分期已成功接入了多份协议。此外，我们的平台也支持其他团队接入，以便更广泛地应用于不同领域。
综上所述，通过采用将Word文档转化为静态页面的技术方案，并结合强大的后台管理功能，我们成功地实现了高效的线上用户协议管理和开发。这一平台不仅满足了当前的需求，还为未来的扩展和发展提供了坚实的基础。通过不断的优化和改进，我们将继续努力提供卓越的协议管理解决方案，以满足团队内外不断增长的需求。
作者介绍Ben，现任消费场景团队研发前端专家。
来源:微信公众号:拍码场
出处:https://mp.weixin.qq.com/s/IojeykQfsZ4hpqqoncE-Uw
,
