整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

定制错题本之wkhtmltopdf和phantomjs比较

育机构在做定制化软件开发的时候,会遇到这样一个问题:机构需要定制自己的错题本封面和封底,并且题目界面需要有各种便签可供学生标记,例如下面这个图:


要显示这样的错题界面,如果用word形式,一种办法是通过html转换成word,但是这样会导致部分理科题目无法显示的情况;另一个办法是直接在word中显示html,这种形式其实还是html,体验不太好,打印出来也会出问题。所以我们采取的是通过PDF的形式展示这种格式,并且还可以定制封面和封底:如下图:



因为PDF是比较好的打印格式,不会出现混乱的情况,所以目前就是怎么解决html完美转换成PDF的问题。


我们尝试了很多插件以后,最终发现下面这2个工具比较合适:wkhtmltopdf和phantomjs,下面分别试一下他们的效果:


  • wkhtmltopdf:下载完成后需要添加到环境变量才能在代码中使用,比如我们使用的是PHP,就可以通过shell_exec执行命令行。通过官网我们知道wkhtmltopdf还是非常强大的,可以设置页面为A3或者A4格式,可以设置页眉页脚,也可以设置字间距,字体,边框等,能满足大部分的转换需求,但是wkhtmltopdf也有他的缺点,就是对于js渲染后的页面转换后显示不太友好。对于我们的需求而言,要解决的难点就是理科公式的问题,因为我们的latex公式基本都是js渲染后才显示。后来发现wkhtmltopdf有一个参数就是可以设置等待时间,最终我们设置等待5秒在导出,就解决了latex导出PDF的问题,并且实现了完美的打印


  • phantomjs:使用方法都差不多,只是phantomjs需要通过js来配置参数。一样的需要先添加phantomjs到环境变量,然后通过代码执行命令行实现,也可以设置加载时间来实现js对html的渲染,只是phantomjs没有wkhtmltopdf转换专业。


本文希望通过自己的开发经验,减少教育软件开发者的坑。可以通过下面这个网站进行测试:http://www.widomk12.cn




目前,教学、教研各种内容线上沉淀、展示丰富多彩,但线上内容“线下化”能力不足或过分依赖人力,比如,线上练习题组卷后以PDF形式分发给学生,家长希望将考试、练习题目打印后,学生带到学校去做(高中生使用手机等电子设备的时间有限),线上各类分析报告以PDF形式分享给学生/家长等。


从业务方面看,不同业务线的多个业务场景都有输出PDF的诉求,如果各业务线自己设计、实现符合自身业务场景的具体方案,除调研、开发工作量较大之外,还会有重复调研,踩坑的情况。


从技术角度看,线上内容转PDF的内容源头来自于H5富文本内容,业界内以此为基础的PDF生成方案多种多样,也各有优劣,比如:


方案对比-表格-1


因此,我们综合了各种PDF生成方案并总结了在探索讲义生成PDF过程中的经验,抽象出了一套通用的,可复用的能力供各业务线快速利用,基本方案和优劣如下:


最终方案-表格-2


目 标




旨在提供一套以H5为载体的PDF通用生成方案,这套方案有如下特点:

  1. 通用性强:能够处理各类H5页面,从分页到生成,做到一套方案,多般兼容。
  2. 扩展性、配置性强:各场景可根据自己的需要自定义页眉、页脚、页码,水印,背景等配置,做到输出形式丰富多彩。
  3. 方便易接入:各业务场景只需关注要展现的内容,无需关注分页,PDF生成等背后的处理 ,为需要产出PDF的业务场景提效赋能;整体来看,调研、设计、开发(+踩坑)一整套 H5 转 PDF的能力至少需要近 30人/日,我们希望这套通用能力的接入成本控制在 7人/日左右;在很多场景接入后,从实际反馈来看,平均只需要 2-3 人/日就接入了。
  4. 质量高:保证输出PDF中内容的展示与H5中无异,各种复杂公式的展示也丝毫无差错。
  5. 性能好:保证 1 分钟内能处理 100+ 的 20页左右的PDF生成任务
  6. 稳定性高:保证有各种兜底策略妥善处理各类异常,同时能够通过限流方案应对突发流量,保证服务稳定。


这套方案可分为两个核心部分,页面展示侧 - Medusa,PDF生成侧 - Hydra


页面展示侧 - Medusa




我们页面展示侧的通用能力——Medusa,是基于Paged.js的二次封装,并以NPM包形式提供给业务方使用。Medusa可对任何HTML进行分页、并根据配置添加页眉、页脚等,最终将处理后的HTML渲染到页面中。Medusa封装并简化了对PDF格式的配置,可覆盖绝大多数业务场景,使得各业务场景将更多精力投入其自身业务逻辑的开发。


之所以选择Pagedjs为基础开发我们自己的SDK,是因为它是目前我们能找到的唯一开源的、具有HTML内容分页,样式处理的前端库,同时我们也在讲义中经过了长期的摸索与沉淀。


接下来将详细介绍Paged.js原理、Medusa支持的功能与使用方法。


一 Paged.js是如何工作的




Paged.js包含了 3 个大模块

  • Chunker(负责HTML内容分页)
  • Polisher (负责CSS样式处理)
  • Previewer (负责预览呈现Chunker和Polisher处理后的内容)

这里将主要介绍 Previewer 和 Chunker,因为我们的二次开发和维护不涉及到Polisher。


Previewer

Previewer 的工作非常简单,但我们会主要利用它封装我们的Medusa,初始化一个Previewer对象,Previewer初始化了Chunker和Polisher对象:


Medusa-代码-1


再调用Previewer的preview()方法,preview()方法做了两件事:

  1. 通过Polisher处理样式内容
  2. 通过Chunker处理需要分页的HTML内容,如果没有指定需要分页的HTML,则会处理整个Body的内容

Medusa-代码-2


当chunker.flow结束,即可在浏览器看到整个页面处理完之后的样子。


Chunker


首先,Chunker解析、预处理需要分页的HTML,为其添加一些必要的属性


Medusa-代码-3


然后创建容纳所有页(pages)的容器,并挂载到renderTo容器下(默认Body),以备组织后续的所有页:



Medusa-代码-4


接着,chunker创建了一个page模版,以便增加页面使用:


Medusa-代码-5


其中,TEMPLATE是Pagedjs内部创建页面时所使用的基础模版。


Medusa-代码-6


接下来,chunker进入了渲染+分页过程(这个过程我们不会在二次开发中做修改,但需要了解其基本思路以便在出问题时能有解决思路),这个过程在循环一个迭代器(*layout),迭代器一直在做3件事:


  1. 将内容添加到模版内容区域的容器中 -> 渲染。
  2. 探测overflow,找到overflow的offset并创建BreakToken (探测overflow过程中很多处都用到了迭代器,此处为了说明思路,简化了相关代码)。


原则:

寻找overflow时会将尽可能多的内容节点插入内容区域,这里,“尽可能多”分为几种情况,比如:

  • 没有剩余节点需要再添加了
  • 达到了一页所能承载的最大字符数;刚开始的时候,如果没有指定每页的最大字符数,Pagedjs会给一个默认值为 1500 的每页最大字符用做判断,在之后会记录分隔好的每一页中的字符数,并取最近4页 (少于4页取全部)的平均值作为之后分页的判断条件,这里,Pagedjs相当于对每一页中能够承载的内容做了一个简单的预测,这个算法对于比较规律的内容做分页时还是比较简单高效的。

步骤:

Pagedjs遵循了如下步骤去寻找overflow:

两个前置条件:

  • 内容区域盒子边界已经确定,下面以contentArea.right 和 contentArea.bottom 分别代指其右边界和下边界。
  • 处理过程中每个节点的边界可以计算(对于文字节点,Pagedjs中使用了Range对象为其创建边界),下面以 node.left、 node.right、node.top 和 node.bottom 分别代指节点的左、右、上、下边界。

i. 从需要处理的内容第一个节点开始,判断是否 node.left >= contentArea.right || node.top >= contentArea.bottom


Medusa-代码-7


ii.如果不满足,则判断 node.right <= contentArea.right && node.bottom <= contentArea.bottom


Medusa-代码-8


iii.如果不满足,那说明有子节点overflow了,则继续深入其子节点查找即可。


3.使用模版添加新的页面,并从BreakToken处继续上述动作。


二 Medusa支持的功能及使用方法




基于Paged.js,Medusa支持了如下功能,并为业务方提供了更加简洁、定制化的配置。


  1. 动态页面分页能力
  2. 单页模版配置 -> 生成能力
  3. 前、后置静态页面生成、与分页后的动态页面拼接能力
  4. 页面处理成功后,通知PDF生成服务(Hydra)执行任务


下方是调用Medusa的代码示例:


Medusa-代码-9


1.1 动态页面分页能力

Medusa核心功能,可将连续的HTML页面转化成一页页PDF样式的HTML。


1.2 单页模版配置 -> 生成能力


通过Grid布局,Paged.js将一个单页模版分为多个区域,整体分为2个大的部分:

  1. base 页面基础配置:每个PDF纸型、水印,内容区域的宽高、margin与padding等等
  2. surround 页面周围区域:如页眉、页脚等配置


业务方通过简单的配置,即可还原UI设计稿中的PDF样式,例子如下图:



1.2.1 base

页面基础配置是对每页的。支持纸型或页面宽高、内容区域margin、padding、背景及水印的设置。



在封装Medusa时,Medusa将读取传入的页面模版配置、静态页内容配置,并将样式上的配置解析并转化为Previewer可理解的样式内容,比如页面宽高的设置:


Medusa-代码-10


将被转化为:


Medusa-代码-11


1.2.2 surround


  1. 可以看到图中的16种不同位置的surround区域。通过设置position,可将业务方自定义的元素渲染到对应的位置上。



2. 目前支持3种类型的surround item:

  • text 文字
  • img 图片
  • pageNum (动态获取)当前页码


example:


Medusa-代码-12


1.3 前/后置静态页面


业务方可通过如下方式配置静态页面的具体内容:


Medusa-代码-13


其中,传入的React JSX Element将会被这样处理:


Medusa-代码-14


处理完成后,将HTML String拼接到页面模版中,再插入分页后内容的前后。


PDF生成侧 - Hydra:




页面展示侧为PDF生成做好了页面的准备,对于PDF生成侧,需要做的工作就更纯粹了,业务方除了请求生成PDF,定期检查PDF生成的进度,无需做任何额外工作。


1.整体流程:

PDF生成是CPU和内存密集型的,由于页面内容的不确定性,也意味着页面渲染时间与生成PDF的时间都是不确定的,因此整体PDF生成的链路被设计成是异步的,如下图:



整体流程上,业务方在请求生成PDF时,会先在后端做一条记录,后端再将任务发送给Node服务,即Hydra;


在生成PDF时, 第 1 步是做页面上的准备,一个生成任务可能有多个URL页面需要生成PDF,所以我们预先启动对应URL数量的PPTR Page,页面都启动完成后,进入下一步;


第 2 步:渲染页面,这个过程中,如果请求是包含多个URL的,这些页面会同步渲染,在所有页面渲染完成后,进入下一步。


第 2.5 步,如果是需要生成连续页码的一整个PDF,还会做额外的一个动作:页码矫正,通过页码矫正,可以将同步渲染的每个页面,按照其之前页面的页码数修正,以保证整体PDF的页码的连贯。


第 3 步,通过PPTR Page的能力将页面转换为PDF buffer,如有必要,再将生成的PDF buffer拼接到一起生成一整个PDF,或者将每个PDF buffer都生成一个PDF,压缩成zip文件。


第 4 步,文件上传OSS,最终返回OSS CDN链接。


2.请求生成PDF:


业务侧请求将对应页面生成PDF的时,只需传入如下字段:


Hydra-代码-1


3.PDF生成过程:


正如在整体流程中所述,PDF生成侧,我们借助 PPTR 的能力打开页面并生成PDF流。


在页面调用 Medusa 分页、组装能力时,所有内容分页组装完成后会向body中插入了一个额外的DOM以标识该页面处理完成:


Hydra-代码-2


这是为了 Hydra 感知页面渲染完成所做的准备,当生成服务的 PPTR 等到该DOM出现时,则表示页面成功渲染并处理完成了:


Hydra-代码-3


此后,在上面已经提到过,对于需要将多个页面生成的PDF拼接成一个PDF的情况,在生成PDF之前需要做一个重要的动作,即页码矫正,原因如下:


  1. 每个页面无法感知其他页面情况的,如:第二个页面不知道第一个页面会生成多少页的PDF。
  2. 它们的页码需要是连续的。


并且我们不希望页面的处理是串行的,因为串行势必导致速度较慢,生成时间长。


这个问题的解决方案如下:

1. 对于每个页面都启用一个page,并同时处理

2. 每个页面处理完成后(pdfLastDOM出现),通过Page.$eval()来统计页数并记录:

Hydra-代码-4


3. 计算出页面中分页之后每一个页面的起始页码,以及所有页面的页码总和

4. 再修改页码容器样式的 counterReset 值即可,其后续页码可自递增。


Hydra-代码-5


5. 之后,再通过 Medusa 在页面window对象中Polyfill的相关配置,比如需要生成的PDF的单页宽、高以生成PDF流。


Hydra-代码-6


6. 最后如有必要,通过pdf-lib拼接这些 pdfBuffer 即可。


Hydra-代码-7


7. PDF生成完成后,上传OSS并返回URL链接


4.性能、稳定性保证:


在整体方案落地前,我们对服务进行了多次性能测试:


以下载题目为例,在4个容器,每个容器 3C 12G 的配置下的并行处理能力如下:


对于 20 道题目,每个PDF生成任务在 15 页左右,平均 1 分钟内能完成 280 个任务的处理。

对于 40 道题目,每个PDF生成任务在 30 页左右,平均 1 分钟内能完成 105 个任务的处理。

对于 60 到题目,每个PDF生成任务在 40 页左右,平均 1 分钟内能完成 54 个任务的处理。


同时,根据 Hydra 服务的整体的处理能力,后端通过任务队列的形式帮助我们保证服务不被瞬间的突刺流量击垮。


已接入/正在接入的相关业务线及场景:




目前,公司有 5 大业务线,8 个场景已经完全接入我们的能力用于 H5 转 PDF,如下是错题本、内容资料库接入后生成的PDF样例:


错题本:




内容资料库试卷:




未来展望




目前整体的PDF生成方案已经能够满足大多数场景和内容,但依然有可改进空间。


HTML的流式布局要求我们必须手动的对内容分页,才能添加页眉,页脚等(即Mdusa做的工作),正因为如此,在处理复杂的内容时,可能会出现一些问题:比如,遇到复杂表格时,由于表格可能会有多种多样的行、列合并,同时表格单元格内的内容也可以多种多样,在分页过程中,Medusa内部的PagedJS并不能完美的处理对于长、且复杂的表格的分割,因此可能遇到分割后表格单元格缺失、错乱或宽高错误的问题,这些问题在讲义中体现较明显。


我们仍在持续关注与研究复杂DOM内容的分割问题,会尝试加以优化和改进PagedJS的能力,同时,我们也以另外一种思路设计了自己的DOM分页器方案,但经过评估,由于实现比较复杂,成本较高,暂时没有投入开发资源。


不过,我们相信,未来我们一定能以更完美的方式分割DOM以生成更高质量的PDF。


作者:高源、陈欣博

来源:微信公众号:高途技术

出处:https://mp.weixin.qq.com/s/c_N7jdNklrNFKR_Cub2Tgg

得去年用过一款口袋打印机,那时候只能打印一些图片和文本类的信息。而如今口袋打印机有了很多新的功能,这次在新浪众测活动中获得的啵哩智能口袋打印机就是一款专注于学习、工作的实用工具。


它通过与手机App的结合可以完成错题解析、搜题打印、笔记整理及学英语、扫描文档和课程表制作等学习功能,还可以通过打横幅、打图片等功能为我们日常工作带来便捷。


啵哩智能口袋打印机是由小濠(深圳)科技有限公司针对学生用户研发,它通过与互联网应用的结合和多元化的场景应用,将传统的打印机变成了学习减负的好帮手。这次测试也会将重点放在打错题功能上,同时对支持更多后期编辑及创意的打图片功能进行了视频演示。下面就来看看这款学习工作小帮手表现如何吧。


【开箱】

在啵哩智能口袋打印机的包装上可以看到很多卡通元素,比如包装侧面,四只小啵哩就告诉我们,它的特色功能是打错题、列清单、做手帐和传纸条。这些经过特别设计小啵哩造型形态可掬,别说孩子了,我看到都喜欢。



在包装背面,是啵哩智能口袋打印机的产品参数、功能说明及厂家相关信息。从产品参数可以看到,啵哩口袋打印机的产品尺寸为83×83×38.5mm,加上鹦鹉嘴后宽度也才为100mm,整个外观尺寸还是比较小巧的。


打开包装,包装内部比较简洁,其实在内包装设计上也可以加入些卡通元素,或者将黑色的吸塑包装换成彩色或许会为啵哩智能口袋打印机增添不少分值。啵哩智能口袋打印机共有4种颜色可选,分别是海蓝色、啵哩绿、妥妥黄和樱桃粉,我拿到的是海蓝色。其实颜色的区别也只是鹦鹉嘴和灯光颜色的不同,而机身颜色并没有随之改变。建议后期指示灯能通过App改变颜色,并将四色的鹦鹉嘴磁性帖一起附送,这样会更加的人性化。



【外观细节】

看到啵哩智能口袋打印机的外观,不知道为什么会忽然想到一休哥。后来想想,应该是因为它的电源键和指示灯组成的图形有点像一个盼晴娘的原因。这个鹦鹉嘴装饰装厉害了,它不仅可以作为啵哩智能口袋打印机的外观配饰,它还是一个磁性帖。可以将打印出来纸条只接吸在冰箱或是金属材质上。


在打印机背面印制有产品信息,机身的右侧是啵哩智能口袋打印机的充电接口和复位孔。机身的四角采用了圆弧过渡,再加上表面的磨砂处理,拿在手里手感非常润滑。经过这几天的使用,经常与桌面接触的机身背面和侧边都没有刮花现象,看来表面强度也是非常高的。


口袋打印机和普通打印机最大的区别就是它的耗材,因为它采用的热敏打印所以耗材只有打印纸而不用换墨盒。啵哩智能口袋打印机的打印纸更换非常简单,只要将上下盖轻轻一推,就可以打开盖子。然后将打印纸放到纸槽,并拉出适量长度到出纸口即可。啵哩口袋打印机耗材规格为58×30mm,因为随机附送的是普通纸,如果是想打印便利贴或是彩色贴纸,只要在官网购买不干胶和多彩打印纸即可。



啵哩智能口袋打印的有效打印宽度为48mm,打印分辨率为203DPI。使用标准打印纸时,两边会有5mm的留边。在使用打大图时要想完美拼接就要将留边剪下才可。对于打印机的打印速度,这与打印的内容多少和选择的深度有关系,啵哩智能口袋打印最大40mm/s的打印速度也是相当快速了。另外,啵哩智能口袋打印内置有无纸检测,开盖检测等传感器。在设备检测到无纸或没有盖好盖子时,指示灯会快速闪烁报警。


打印机底部的送纸机构,采用的是耐高温材质,在刚打印完时会有高温,一定要注意不要碰触打印头及这个部位以防烫伤。在出口处,是一条45度的锯齿撕纸口,对于撕纸的效果实测并不是十分满意,锯齿边缘可以看到有明显的毛边。建议后期可以开发一种自动切纸机构,比较采用辊式切刀。



【功能使用】

在正式使用之前,首先要下载啵哩App。按提示完成安装并注册登录账号后就可以进入App主界面了。啵哩App的主界面是由首页、发现、素材广场和我的界面组成。在首页界面可以完成啵哩口袋打印机的各种功能,并且可通过下面的进阶攻略可以学会很多使用技巧;发现界面其实就是一个互动的环节,可以通过推荐或是查看最新的动态,并可关注喜欢的达人;也可以点击中间的+号图标发布自己的动态;在素材广场里,有各类不同的素材可以直接下载或收藏备以后使用;而我的主要是设备的信息及使用记录等内容。



啵哩智能口袋打印机在初次使用,先要先将设备与手机绑定。啵哩智能口袋打印机支持两种添加方式,可以直接通过蓝牙来查找设备,也可以双击打印机电源键打印专属二维码,然后以扫码方式连接。如果直接使用查找设备的方式,手机App需要获得定位权限;而扫码连接感觉更好玩一些。



1、打错题

啵哩智能口袋打印机的主要功能就是打错题,其依托于作业帮,内置了1.8亿海量的专业题库,涵盖了小学、初中和高中教材及练习册题目,对于难题还有多种解题步骤。只要使用啵哩App的打错题功能,就可以自动得到试题的解析,并可收藏或打印出来备后期复习。



在啵哩App里还可以将错题进行分类管理,默认的有语文、数学和英语三种,也可以根据打印内容添加科目。并且在打印选项里可以选择是以横向还是纵向进行打印。横向打印时,很明显会比纵向打印的内容显得更清晰。不过对于内容较多时,会出现多页的打印情况,后期需要进行拼接才能保存完整的错题解析。


2、打图片

啵哩App的打图片功能也是非常强大的,其重点是图片的后期编辑处理,其不仅有丰富的滤镜功能,还可以进行编辑、旋转、裁剪、橡皮擦和打大图功能。通过使用滤镜等功能可以打印出不同类型的照片,比如现在比较火的哪吒造型,就可以通过后期编辑打印出不同创意的贴图。



我是一名电气自动化工程师,会经常出差,有时候需要一些图纸,就可以拿出啵哩智能口袋打印机直接打印了。不过,以默认的方式直接打印,即使是采用高浓度打印,图片的内容也是很难分辨。这与打印机分辨率是有关系,不过可以通过打印的画幅太小,来弥补分辨率的缺陷。这时,就要用到打大图功能,将图片分为多部分进行打印,然后后期拼接就可以打印出清晰的内容了。

这是最终的打印效果,可以很明显的看出,使用打大图功能后,这张图片的大小对接后和实际的A4纸差不多。图纸内元件的序号标识都可以清楚分辨。而默认打印出的图片标识模糊成一片,这两者完全是天壤之别。这也是打图片的乐趣所在。


3、扫描文稿

喜欢看书的朋友一定会有这样的情况,比如看到一些精美的句子都要记录下来。对于网络内容,我们可以通过打网页来完成,而对于实物书籍或杂志时,就可以通过啵哩的新功能扫描文稿来完成。


其实扫描文稿的作用还有很多,比如我们需要将一段文本进行再编辑时。就可以通过手机扫描选择需要的内容,然后通过文本识别就可以进行编辑了。如果是怕识别有误,还可以通过校对在同屏下进行比对,或是前期直接选择合适的文本深度来保证识别的正确率。我随机通过扫描了一段文稿,文本识别正确率为100%,扫描文稿的功能还是非常不错的。


4、浓度对比

无论是在打图片还是文本,在最后的打印选项里都会有浓度的选择。当然,也可以通过编辑功能来调整打印内容的浓度,但对于最终的选择效果也是比较明显的。这里以一张默认的图片和一张经过简单编辑后的图片,分别以淡、适中和浓三种浓度打印出的效果对比如下:



在使用浓度为淡时,打印的颜色浓度会比较浅,但打印速度也会比较快一些。如果是对于长文本或是网页打印,对打印质量没有过多要求的话,这种模式下打印速度会提升不少。其实,多数情况下,使用默认的适中浓度即可。

5、分辨率

其实在之前已经说过,啵哩智能口袋打印机的打印分辨率为203DPI。这个打印精度如果只是打印一些便贴或是文本类的横幅什么的,打印效果还是可以接受的。但对于打印一些图片内的文本就明显不足了,虽然后期可以通过打大图等功能进行弥补,但要想完美保存,还需要进行拼接等操作。



总结

其实啵哩智能口袋打印机的功能还有很多,比如可通过不同素材和创意,设计出个性化的玩纸条功能;也可以使用不同的耗材,来打印便利贴或是彩色贴画。这不仅可以为孩子学习减负,对我们的工作和生活其实都是很有帮助的。特别是这次出差,虽然打印出的图纸需要几张拼接一起,但要比拿着电脑去现场轻松了许多。现在啵哩智能口袋打印机已经推出了打印精度更高的啵哩L2,希望它能够成为孩子和家长更喜欢的小帮手。