本发明公开了一种基于canvas的动态网页打印方法方法、系统及存储介质，该方法包括以下步骤：获取打印指令，并根据所述打印指令克隆打印的目标文档对象模型以及递归取出所有所述目标文档对象模型的节点信息；根据所述节点信息确定canvas的渲染列队，并根据所述渲染列队将canvas渲染成图片；将所述图片替换所述目标文档对象模型，并执行打印操作。本发明实施例能够解决动态网页由于异步加载方式导致的打印空白问题。本发明实施例可广泛应用于计算机网络技术领域。
1.一种基于canvas的动态网页打印方法，其特征在于，包括步骤：获取打印指令，并根据所述打印指令克隆打印的目标文档对象模型以及递归取出所有所述目标文档对象模型的节点信息；所述节点信息包括节点、节点内容、样式及属性信息，所述属性信息包括分页标识类信息；
根据所述节点信息确定canvas的渲染列队，并根据所述渲染列队将canvas渲染成图片；
将所述图片替换所述目标文档对象模型，并执行打印操作。
2.根据权利要求1所述的基于canvas的动态网页打印方法，其特征在于，所述递归取出所有所述目标文档对象模型的节点信息，包括以下步骤：递归取出所有所述目标文档对象模型的节点、节点内容、样式及属性信息；
根据所述节点、节点内容、样式及属性信息确定渲染列表。
3.根据权利要求2所述的基于canvas的动态网页打印方法，其特征在于，所述根据所述节点信息确定canvas的渲染列队，包括以下步骤：根据所述属性信息按照预设的规则对所述渲染列表排序确定所述渲染列队。
4.根据权利要求3所述的基于canvas的动态网页打印方法，其特征在于，按照预设的规则对所述渲染列表排序确定所述渲染列队，包括以下步骤：按照包括从外层到内层、从浅层到深层及从上层到下层的顺序对所述渲染列表排序确定所述渲染列队。
5.根据权利要求4所述的基于canvas的动态网页打印方法，其特征在于，根据所述渲染列队将canvas渲染成图片，包括以下步骤：遍历所述渲染列队，根据节点类型调用canvas API填充canvas；
根据canvas API将所述canvas渲染成图片。
6.根据权利要求5所述的基于canvas的动态网页打印方法，其特征在于，所述根据节点类型调用canvas API填充canvas，包括以下步骤：根据文字类型节点及输入框节点类型调用context.fillText；
根据图片类型节点、canvas对象类型节点及SVG类型节点都调用context.drawImage；
根据Iframe类型节点先调用new CanvasRender构造canvas对象，再调用context.drawImage。
7.根据权利要求1‑6任一项所述的基于canvas的动态网页打印方法，其特征在于，还包括步骤：
8.一种基于canvas的动态网页打印系统，其特征在于，包括：获取模块，用于获取打印指令，并根据所述打印指令克隆打印的目标文档对象模型以及递归取出所有所述目标文档对象模型的节点信息；所述节点信息包括节点、节点内容、样式及属性信息，所述属性信息包括分页标识类信息；
渲染模块，用于根据所述节点信息确定canvas的渲染列队，并根据所述渲染列队将canvas渲染成图片；
打印模块，用于将所述图片替换所述目标文档对象模型，并执行打印操作。
9.一种基于canvas的动态网页打印系统，其特征在于，包括：至少一个处理器；
当所述至少一个程序被所述至少一个处理器执行，使得所述至少一个处理器实现如权利要求1‑7任一项所述的基于canvas的动态网页打印方法。
10.一种存储介质，其中存储有处理器可执行的程序，其特征在于，所述处理器可执行的程序在由处理器执行时用于执行如权利要求1‑7任一项所述的基于canvas的动态网页打印方法。
基于canvas的动态网页打印方法、系统及存储介质
技术领域
[0001] 本发明涉及计算机网络技术领域，尤其涉及一种基于canvas的动态网页打印方法、系统及存储介质。
背景技术
[0002] 随着计算机网络技术领域的发展，越来越多的网站采用异步加载方式，如越来越多的网站通过JavaScript异步获取后端数据形成动态页面；如目前大量网站使用Element‑
UI、MUSE‑UI、Vuetify等UI组件库，其中部分组件需要使用异步加载；如主流图表库Echarts
等大多采用异步数据加载模式，并且使用动态样式。如果采用浏览器默认的打印功能或传
统的打印方式无法获取异步加载的数据，而导致打印结果与浏览器所见内容不相符、样式
错乱及部分空白等。
发明内容
[0003] 有鉴于此，本发明实施例的目的是提供一种基于canvas的动态网页打印方法、系统及存储介质，能够解决动态网页由于异步加载方式导致的打印空白问题。
[0004] 第一方面，本发明实施例提供了一种基于canvas的动态网页打印方法，包括以下步骤：
[0005] 获取打印指令，并根据所述打印指令克隆打印的目标文档对象模型以及递归取出所有所述目标文档对象模型的节点信息；
[0006] 根据所述节点信息确定canvas的渲染列队，并根据所述渲染列队将canvas渲染成图片；
[0007] 将所述图片替换所述目标文档对象模型，并执行打印操作。
[0008] 可选地，所述递归取出所有所述目标文档对象模型的节点信息，包括以下步骤：
[0009] 递归取出所有所述目标文档对象模型的节点、节点内容、样式及属性信息；
[0010] 根据所述节点、节点内容、样式及属性信息确定渲染列表。
[0011] 可选地，所述根据所述节点信息确定canvas的渲染列队，包括以下步骤：
[0012] 根据所述属性信息按照预设的规则对所述渲染列表排序确定所述渲染列队。
[0013] 可选地，按照预设的规则对所述渲染列表排序确定所述渲染列队，包括以下步骤：
[0014] 按照包括从外层到内层、从浅层到深层及从上层到下层的顺序对所述渲染列表排序确定所述渲染列队。
[0015] 可选地，根据所述渲染列队将canvas渲染成图片，包括以下步骤：
[0016] 遍历所述渲染列队，根据节点类型调用canvas API填充canvas；
[0017] 根据canvas API将所述canvas渲染成图片。
[0018] 可选地，所述根据节点类型调用canvas API填充canvas，包括以下步骤：
[0019] 根据文字类型节点及输入框节点类型调用context.fillText；
[0020] 根据图片类型节点、canvas对象类型节点及SVG类型节点都调用context.drawImage；
[0021] 根据Iframe类型节点先调用new CanvasRender构造canvas对象，再调用context.drawImage。
[0022] 可选地，还包括步骤：
[0023] 打印完成后，将所述目标文档对象模型替换所述图片。
[0024] 第二方面，本发明实施例提供了一种基于canvas的动态网页打印系统，包括：
[0025] 获取模块，用于获取打印指令，并根据所述打印指令克隆打印的目标文档对象模型以及递归取出所有所述目标文档对象模型的节点信息；
[0026] 渲染模块，用于根据所述节点信息确定canvas的渲染列队，并根据所述渲染列队将canvas渲染成图片；
[0027] 打印模块，用于将所述图片替换所述目标文档对象模型，并执行打印操作。
[0028] 第三方面，本发明实施例还提供了一种基于canvas的动态网页打印系统，包括：
[0029] 至少一个处理器；
[0030] 至少一个存储器，用于存储至少一个程序；
[0031] 当所述至少一个程序被所述至少一个处理器执行，使得所述至少一个处理器实现上述的基于canvas的动态网页打印方法。
[0032] 第四方面，本发明实施例还提供了一种存储介质，其中存储有处理器可执行的程序，所述处理器可执行的程序在由处理器执行时用于执行的基于canvas的动态网页打印方
法。
[0033] 实施本发明实施例包括以下有益效果：本发明实施例通过克隆打印的目标文档对象模型以及递归取出所有所述目标文档对象模型的节点信息，根据所述节点信息确定
canvas的渲染列队，并根据所述渲染列队将canvas渲染成图片，将所述图片替换所述目标
文档对象模型，打印图片；即通过canvas将动态网页转换图片进行打印，解决了动态网页由
于异步加载方式导致的打印空白问题。
附图说明
[0034] 图1是本发明实施例提供的一种基于canvas的动态网页打印方法的步骤流程示意图；
[0035] 图2是本发明实施例提供的一种基于canvas的动态网页打印系统的结构框图；
[0036] 图3是本发明实施例提供的另一种基于canvas的动态网页打印系统的结构框图。
具体实施方式
[0037] 下面结合附图和具体实施例对本发明做进一步的详细说明。对于以下实施例中的步骤编号，其仅为了便于阐述说明而设置，对步骤之间的顺序不做任何限定，实施例中的各
步骤的执行顺序均可根据本领域技术人员的理解来进行适应性调整。
[0038] 如图1所示，本发明实施例提供了一种基于canvas的动态网页打印方法，包括以下步骤：
[0039] S100、获取打印指令，并根据所述打印指令克隆打印的目标文档对象模型以及递归取出所有所述目标文档对象模型的节点信息；
[0040] S200、根据所述节点信息确定canvas的渲染列队，并根据所述渲染列队将canvas渲染成图片；
[0041] S300、将所述图片替换所述目标文档对象模型，并执行打印操作。
[0042] 需要说明的是，当用户点击网页上的打印按钮后，即获取了打印指令，一般使用javascript调用打印函数，克隆指javascript对象的深拷贝。
[0043] 本领域技术人员可以理解的是，节点信息包括节点内容及样式等，如文字内容、字体颜色、字体大小等，还包括是否为顶层元素、是否为包含内容的容器、是否为canvas元素
及是否为纯文字等信息。多个节点的样式形成层叠样式表。
[0044] 需要说明的是，执行打印操作，只需调用网页打印API windows.print()即可获取正确的打印结果。
[0045] 实施本发明实施例包括以下有益效果：本发明实施例通过克隆打印的目标文档对象模型以及递归取出所有所述目标文档对象模型的节点信息，根据所述节点信息确定
canvas的渲染列队，并根据所述渲染列队将canvas渲染成图片，将所述图片替换所述目标
文档对象模型，打印图片；即通过canvas将动态网页转换图片进行打印，解决了动态网页由
于异步加载方式导致的打印空白问题。
[0046] 可选地，所述递归取出所有所述目标文档对象模型的节点信息，包括以下步骤：
[0047] 递归取出所有所述目标文档对象模型的节点、节点内容、样式及属性信息；
[0048] 根据所述节点、节点内容、样式及属性信息确定渲染列表。
[0049] 需要说明的是，属性信息包括是否为顶层元素、是否为包含内容的容器、是否为canvas元素及是否为纯文字等信息。
[0050] 可选地，所述根据所述节点信息确定canvas的渲染列队，包括以下步骤：
[0051] 根据所述属性信息按照预设的规则对所述渲染列表排序确定所述渲染列队。
[0052] 具体地，通过z‑index、position、float等层叠样式表属性、元素的层级信息以及分页标识类信息将渲染列表排序确定渲染列队。
[0053] 需要说明的是，浏览器一般是根据用户设置的页面样式、大小及web页面内容的多少来自行决定分页位置，因此不能根据需求自定义分页；本实施方式中分页标识类信息可
以实现精准分页。
[0054] 可选地，按照预设的规则对所述渲染列表排序确定所述渲染列队，包括以下步骤：
[0055] 按照包括从外层到内层、从浅层到深层及从上层到下层的顺序对所述渲染列表排序确定所述渲染列队。
[0056] 可选地，根据所述渲染列队将canvas渲染成图片，包括以下步骤：
[0057] 遍历所述渲染列队，根据节点类型调用canvas API填充canvas；
[0058] 根据canvas API将所述canvas渲染成图片。
[0059] 具体地，遍历渲染列队，将层叠样式表样式转为canvasContext.setFillStyle可识别的参数后，依据节点类型调用相应的canvas API。使用canvas API的
canvas.toDataURL()将canvas渲染成图片，使用图片替换原有文档对象模型。
[0060] 可选地，所述根据节点类型调用canvas API填充canvas，包括以下步骤：
[0061] 根据文字类型节点及输入框节点类型调用context.fillText；
[0062] 根据图片类型节点、canvas对象类型节点及SVG类型节点(SVGElementContainer)都调用context.drawImage；
[0063] 根据Iframe类型节点(IframeElementContainer)先调用new CanvasRender构造canvas对象，再调用context.drawImage。
[0064] 可选地，还包括步骤：
[0065] 打印完成后，将所述目标文档对象模型替换所述图片。
[0066] 本领域技术人员可以理解的是，打印完成后，为不影响网页的正常使用，将将所述目标文档对象模型替换所述图片，将动态网页恢复到原始状态。
[0067] 下面以一具体实施例说明根据目标打印网页生成的渲染列表。
[0068] 如目标打印网页主要代码如下：
[0069]
[0070]
[0071] 生成渲染列表形式如下：[
，，，
，| ， | ， | ， | ， | ， | ， | ]。
[0072] 如图2所示，本发明实施例提供了一种基于canvas的动态网页打印系统，包括： [0073] 获取模块，用于获取打印指令，并根据所述打印指令克隆打印的目标文档对象模型以及递归取出所有所述目标文档对象模型的节点信息；
[0074] 渲染模块，用于根据所述节点信息确定canvas的渲染列队，并根据所述渲染列队将canvas渲染成图片；
[0075] 打印模块，用于将所述图片替换所述目标文档对象模型，并执行打印操作。 [0076] 可见，上述方法实施例中的内容均适用于本系统实施例中，本系统实施例所具体实现的功能与上述方法实施例相同，并且达到的有益效果与上述方法实施例所达到的有益
效果也相同。
[0077] 如图3所示，本发明实施例还提供了一种基于canvas的动态网页打印系统，包括： [0078] 至少一个处理器； [0079] 至少一个存储器，用于存储至少一个程序； [0080] 当所述至少一个程序被所述至少一个处理器执行，使得所述至少一个处理器实现上述的基于canvas的动态网页打印方法。
[0081] 可见，上述方法实施例中的内容均适用于本系统实施例中，本系统实施例所具体实现的功能与上述方法实施例相同，并且达到的有益效果与上述方法实施例所达到的有益
效果也相同。
[0082] 此外，本申请实施例还公开了一种计算机程序产品或计算机程序，计算机程序产品或计算机程序存储在计算机可读存介质中。计算机设备的处理器可以从计算机可读存储
介质读取该计算机程序，处理器执行该计算机程序，使得该计算机设备执行上述的基于
canvas的动态网页打印方法。同样地，上述方法实施例中的内容均适用于本存储介质实施
例中，本存储介质实施例所具体实现的功能与上述方法实施例相同，并且达到的有益效果
与上述方法实施例所达到的有益效果也相同。
[0083] 以上是对本发明的较佳实施进行了具体说明，但本发明创造并不限于所述实施例，熟悉本领域的技术人员在不违背本发明精神的前提下还可做作出种种的等同变形或替
换，这些等同的变形或替换均包含在本申请权利要求所限定的范围内。
|
