指南：图书馆拥有数十亿种文档，包括word、ppt、excel、txt、pdf等十几种办公常用文档。核心技术是转码和呈现。转码的目的是将不同的文档解析转换成一套通用的数据格式，由后端实现，展示是渲染文档数据。在此之前，库的前端使用HTML+CSS进行渲染。这种方式在后来的业务发展过程中遇到了阻力。例如，难以导出文档的长图像、文档标记、关键字突出显示、水印和文档内容分析。、防抄袭等。全文2803字，预计阅读时间14分钟。1.架构今年5月份，我们开始使用Canvas来实现新一代阅读器。可同时支持PC、wap和小程序。与老读者相比，有以下优点：在选择技术的时候，我们选择了vite+ts。vite可以给我们带来极致的开发体验，而ts可以让我们写的代码更安全，业务方调用API更方便。整体架构分为：逻辑层：负责管理数据加载、页面创建、页面渲染调度、事件分发，对外提供核心API；数据层：负责加载文档数据，包括文档内容、自定义字体、图片；解析层：负责解析文档数据，输出需要渲染的数据，如文本内容、字体大小、文本位置、图片内容、图片位置等；渲染层：负责渲染解析后的内容，目前只支持Canvas渲染，可以根据业务需要扩展其他渲染方式，如HTML、SVG；应用层：业务端使用CReader进行文档渲染，内部提供在线阅读器辅助开发。2.核心技术点2.1文本和图像渲染机制文档主要由文本和图像组成，整个文档渲染主要围绕这两者展开。Canvas是浏览器提供的一种能力，可以通过绘图指令进行绘制，最终将要显示的内容呈现给用户。由于不需要通过DOM元素进行渲染，因此无法享受DOM本身的交互性，比如文本选择、DOM事件等。但是对于文档来说，它是静态的，不需要那么多的交互性。再对比一下前端的各种渲染机制：基于各种业务场景我们最终选择了使用Canvas，但是整个阅读器的设计都考虑了支持多种渲染方式。Canvas在渲染过程中需要注意一些点。例如，在Safari浏览器中，canvas的大小在移动端和PC端都不能超过它的限制。在源码（webkit源码）中可以看到：而且，在绘制过程中不能占用过多的内存空间，否则调用getContext('2d')时会返回NULL。当我们渲染一个1000页的文档时，内存开销非常大。最后采用了只绘制可见区域页面的策略。一旦某个页面不可见，内存空间就会立即释放。这一措施使整个阅读器的内存使用量减少了90%。你可能会担心Canvas渲染会出现性能问题。其实在整个测试过程中，Canvas渲染可以通过一些手段进行优化，绘图性能不会成为瓶颈。Canvas在绘制自定义字体时需要保证加载字体，否则使用的字体会失效。而且Canvas绘图不支持字符间距。经过数据分析后，需要计算每个角色在画布上的最终位置。由于用户会调整文档大小，最终的字符位置需要考虑缩放比例。Canvas在绘制图片的时候，需要保证图片在绘制前加载完毕。如果要将图片导出到Canvas，必须保证图片没有跨域问题。最终绘制效果如下（图中的线条是我们的调试工具，可以查看每个字符的具体绘制位置）：2.2文本选择在老读者中，由于DOM节点的复杂性，经验文选的很不好，会来回跳转。如果选择跨页，因为页与页之间会有广告，广告内容也会被复制。用Canva渲染时，它不提供文本选择方案，需要你自己实现整个文本选择。整个思路其实就是根据鼠标传递的坐标位置找到对应的文字，这就需要将光标的坐标和文字的坐标进行匹配。在reader的整个设计过程中，都有一个数据层记录着每个节点的坐标信息。但是在文本选择的过程中，需要考虑多种情??况，比如光标第一次落在非文本区域，文本选择时出现跨页，整行字体大小等。文字内容不同，行距也不同。为了不影响文档原有内容，在文档顶部按需创建了一个Canvas，用于文本选择和高亮显示。整体效果如下：跨页文本选择3.业务功能3.1反作弊旧版阅读器中的文本复制功能是浏览器自带的。所有文本节点都可以通过浏览器的调试工具看到具体的内容，或者通过代码的方式获取文本内容。使用Canvas渲染，所有的内容节点都会绘制在一张图上，从而有效的避开了文档中的内容。3.2文档转图片由于老版本的阅读器使用HTML渲染，DOM节点比较复杂，样式也比较多。使用html2canvas这样的库并不容易。我们使用无头浏览器来导出文档的长图像。该方法消耗服务器资源，耗时较长，平均5-6秒。新一代阅读器使用Canvas渲染，Canvas自然支持导出图片，这样就可以从文档中的任意页面导出图片，将不同的页面拼接成一张长图。3.3文档标记新版阅读器使用Canvas渲染，文档标记水到渠成，实现成本极低。图形绘制可以直接使用fabric等开源方案轻松实现各种图形的绘制，并且可以将绘制的内容导出为json文件，实现多人标记和共享。文档标注效果：4.小程序排版图书馆的文档排版有两种，一种叫流式，适合手机阅读，但是丢失了文档原来的格式；另一种称为格式，主要用于wap和PC，与原始文档结构一致。目前小程序以流为主，布局为辅，布局通过webview的H5页面直接加载，但是小程序的原生组件无法添加到小程序的webview中，这导致用户在查看排版文档时看不到文档周边的其他信息，如文档推荐、VIP指南、工具栏等，下载文档时只能从网络视图。之前尝试过在iframe中渲染文档，但是体验不是很好，后来因为各种原因放弃了这个方法。新一代阅读器不仅可以支持PC和wap，还可以扩展到小程序。我们最近做了一次尝试，成功渲染了布局文档，体验非常好。这使得布局文档可以像流程文档一样嵌入到小程序的原生页面中。效果如下：5、最后，总的来说，文库新一代文档阅读器可以给用户带来更好的体验，满足更复杂的业务场景。在开发体验方面，采用最新的构建工具vite，带来极致的开发体验；接入更简单，无论使用什么技术栈，都可以轻松接入。如果使用默认配置，5行代码即可访问。以前是不可能的；全面的单项测试覆盖率保证质量。同一套代码可以同时满足wap、pc和applets，覆盖库中90%的文档类型。不断迭代，将覆盖全馆文献类型。推荐阅读：｜详解预训练模型在信息检索第一阶段的应用｜快速编辑——助力Duka智能编辑实践提升效率｜打开“微前端”之门----------END----------百度极客说，百度官方技术公众号上线啦！技术干货·行业资讯·在线沙龙·行业会议招聘信息·介绍资料·技术书籍·百度周边欢迎各位同学关注
