随着业务的迅速发展,线上用户协议的数量和频繁的修改需求不断增加,这使得协议的管理变得越来越复杂。为了解决这一挑战,我们进行了技术调研和深入讨论,提出了一种高效的协议管理和开发方案,旨在降低人力成本,提高性能和可扩展性。
一、背景随着业务规模的不断扩大,我们无法避免地需要创建和修改各种线上用户协议。然而,每次协议的修改都需要耗费相当数量的人力和资源。因此,我们急需寻找一种更高效的方法来管理和开发这些协议,以适应不断增长的需求。
二、调研为了找到合适的解决方案,我们进行了技术调研和比较。最初,我们考虑了两种主要选项:一是直接预览PDF和Word文档,二是将Word文档转化为静态页面。经过深入比较,我们得出以下结论:
技术方案比较技术方案 | 页面大小 | 性能 | 可扩展性 |
直接预览PDF和Word | 200KB左右 | 中 | 低 |
Word转化为静态页面 | 30KB左右 | 高 | 高 |
从上表可以看出,将Word文档转化为静态页面是更为优越的选择。这种方法不仅减小了页面的大小,提高了性能,还具备更高的可扩展性。
三、期望目标我们制定了一系列期望目标,以更好地满足协议管理和开发的需求:
- 通过后台管理所有协议,实时编辑和更新,确保协议的实时生效。
- 实现历史记录功能,允许回滚到以前的协议版本。
- 通过实时编辑功能,可以添加相关脚本文件,提高协议的可扩展性。
- 平台应支持跨团队使用,并通过数据隔离,确保不同团队的协议数据互不干扰。
这是协议管理平台的协议列表界面,它能够管理协议平台内所有已有协议。同时可以进行编辑和新增协议,并且提供了二维码预览的功能。
这是协议管理平台的协议编辑界面,它能够直接上传Word文档或在富文本编辑器中直接编辑内容。并且可以直接预览在APP内中的展示样式。
4-3. Word转化为Html原理- 根据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