导读 ：文库有数十亿文档，包含 word、ppt、excel、txt 和 pdf 等十几种常见办公文档，核心技术是转码和展示，转码的目标是把不同文档进行解析转换成一套通用的数据格式，由后端实现，而展示是把文档数据进行渲染。在这之前，文库前端采纳的 HTML+CSS 进行渲染，这种形式在前面的业务倒退过程中遇到了阻力，比方很难实现文档导出长图、文档标记、关键字高亮、水印、文档内容分析、防复制等。
全文 2803 字，预计浏览工夫 14 分钟
一、架构
在往年 5 月份时候，咱们开始应用 Canvas 实现新一代阅读器，它可能同时反对 PC、wap 和小程序，相比与老的阅读器它具备以下劣势：
在技术选型的时候，咱们抉择了 vite + ts，vite 可能带给咱们极致的开发体验，ts 可能让咱们写的代码更有保障，业务方调用 API 时更便捷。整体架构分为：
逻辑层 ：负责管理数据的加载、页面创立、页面渲染调度、事件散发、对外提供外围 API；
数据层 ：负责加载文档数据，蕴含文档内容、自定义字体、图片；
解析层 ：负责把文档数据进行解析，产出要渲染的数据，比方文本内容、字体大小、文本地位、图片内容、图片地位等；
渲染层 ：负责把解析后的内容进行渲染，目前只反对 Canvas 渲染，可依据业务需要进行扩大其它渲染形式，比方 HTML、SVG；
应用层 ：应用 CReader 进行文档渲染的业务方，外部提供了一个在线阅读器，辅助开发。
二、核心技术点
2.1 文本图片渲染机制
文档次要由文本和图片形成，整个文档渲染次要围绕这两个进行。Canvas 是浏览器提供的一种能力，能够通过绘制指令进行绘制，最终把要展现的内容出现给用户。因为它不须要通过 DOM 元素渲染，这就享受不到 DOM 自身的可交互性，比方文本抉择、DOM 事件，不过对于文档来说，属于动态的，对可交互性要求没有那么高。上面比照一下前端中的各种渲染机制：
综合各种业务场景，咱们最终抉择应用 Canvas，不过整个阅读器设计思考了反对多种渲染形式。Canvas 在渲染的过程中须要有一些留神点，比方在 Safari 浏览器中，画布的大小在挪动端和 PC 端不能超过它的限度，通过源码（webkit 源码）中能够看到：
而且，绘制过程中不能占用太多的内存空间，否则调用 getContext(‘2d’) 时会返回 NULL，咱们过后渲染 1000 页文档时，内存开销很大。最终采纳了一种策略，只对可见区域的页面进行绘制，一但某页不可见时，立马开释内存空间，这一措施让整个阅读器的内存占用升高 90%。你可能会放心 Canvas 渲染会有性能问题，其实在整个测试过程中，Canvas 渲染能够通过一些伎俩优化，绘制性能并不会成为瓶颈。
Canvas 在绘制自定义字体的时候须要确保字体被加载过，否则应用的字体将有效。而且 Canvas 绘制并不反对字符间距，在数据解析后须要计算每个字符最终在画布的地位，因为用户会调整文档尺寸，最终的字符地位须要思考缩放比例。Canvas 在绘制图片时须要确保图片被加载完能力进行绘制，如果想要对 Canvas 导出图片，那么要确保图片没有跨域问题。最终的绘制成果如下（图中的线条是咱们的调试工具，能够查看每个字符具体绘制的地位）：
2.2 文本抉择
在老的阅读器中，因为 DOM 节点比较复杂，文本抉择的体验十分不好，会来回跳动，如果跨页抉择时，因为页间会有广告，导致把广告内容也复制了。应用 Canva 渲染时，它并没有提供文本抉择计划，须要本人实现整个文本的抉择。整个思路其实就是依据鼠标通过的坐标地位，找到对应的文本，这就须要把光标的坐标与文本的坐标对应起来。在整个阅读器设计的过程中，有一个数据层会记录各个节点的坐标信息。然而，在文本抉择的过程中，须要思考多种状况，比方光标首次落在非文字区域、文本抉择时产生了跨页、整行文本内容字体大小不一、行间距不一等。为了不影响文档本来内容，在文档顶部按需创立了一个 Canvas 进行文本抉择高亮状态绘制。整体成果如下：
跨页文本抉择
三、业务性能
3.1 防舞弊
旧版阅读器中文本复制性能是浏览器自带的，所有的文本节点通过浏览器的调试工具看到具体的内容，也能够通过代码的形式获取文本内容。而采纳 Canvas 渲染，所有的内容节点将被绘制到一张图上，从而无效防止获取文档中的内容。
3.2 文档转图
因为旧版阅读器采纳 HTML 的形式渲染，DOM 节点比较复杂，款式比拟多，采纳相似 html2canvas 这种库基本不好使。咱们实现文档导出长图采纳的是无头浏览器的形式，这种形式须要耗费服务端资源，而且耗时比拟长，均匀 5 - 6 秒。新一代阅读器采纳 Canvas 渲染，Canvas 人造反对导出图片，从而可能把文档中的任意页导出图，把不同页面拼接成长图。
3.3 文档标记
新版阅读器采纳 Canvas 渲染，做文档标记也就是牵强附会的事件，使得实现老本极低。图形绘制能够间接借助于开源计划，比方 fabric，轻松实现各种图形的绘制，而且可能把绘制的内容导出为 json 文件，这让多人标记共享成为了可能。文档标记成果：
四、小程序排版
文库文档排版形式有两种，一种称为流式，适宜挪动端浏览，然而失落了文档原有格局；另一种称为版式，次要用于 wap 和 PC，与原文档构造统一。目前小程序以流式为主，版式为辅，版式间接通过 webview 加载的 H5 页面，但小程序的 webview 中不能增加小程序的原生组件，这导致用户看版式文档时不能看文档周边的其它信息，比方文档举荐、VIP 疏导、工具栏等内容，下载文档时也只能从 webview 中跳回小程序原生页面。以前尝试过以 iframe 的形式渲染文档，但体验不是很好，因为种种原因这种形式就废除掉了。新一代阅读器不仅能够反对 PC、wap，而且可能裁减到小程序上，咱们最近做过一次尝试，胜利地把版式文档渲染进去了，而且体验很好。这就可能让版式文档和流式文档一样能够嵌入到小程序原生页面当中。成果如下：
五、最初
总得来说，文库新一代文档阅读器可能带给用户更好的体验，满足更多简单的业务场景。在开发体验上，应用了最新构建工具 vite，带来极致的开发体验；接入更轻松简略，无论应用任意技术栈都可能轻松接入，如果均应用默认配置，5 行代码即可接入，在以前是无奈做到的；全面的单测笼罩，为品质保驾护航。同一套代码可同时满足 wap、pc 和小程序，笼罩文库 90% 的文档类型，随着一直迭代，会笼罩文库所有的文档类型。
举荐浏览：
|详解预训练模型在信息检索第一阶段的利用
|疾速剪辑 - 助力度咔智能剪辑提效实际
|推开“微前端”的门
———- END ———-
百度 Geek 说
百度官网技术公众号上线啦！
技术干货 · 行业资讯 · 线上沙龙 · 行业大会
招聘信息 · 内推信息 · 技术书籍 · 百度周边
欢送各位同学关注