CN112558894A - 基于canvas的动态网页打印方法、系统及存储介质 - Google Patents

基于canvas的动态网页打印方法、系统及存储介质 Download PDF

Info

Publication number
CN112558894A
CN112558894A CN202011536167.1A CN202011536167A CN112558894A CN 112558894 A CN112558894 A CN 112558894A CN 202011536167 A CN202011536167 A CN 202011536167A CN 112558894 A CN112558894 A CN 112558894A
Authority
CN
China
Prior art keywords
canvas
rendering
printing
node
target document
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN202011536167.1A
Other languages
English (en)
Other versions
CN112558894B (zh
Inventor
石文军
范佳
马立珂
王子骏
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Guangzhou Dingjia Computer Technology Co ltd
Original Assignee
Guangzhou Dingjia Computer Technology Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Guangzhou Dingjia Computer Technology Co ltd filed Critical Guangzhou Dingjia Computer Technology Co ltd
Priority to CN202011536167.1A priority Critical patent/CN112558894B/zh
Publication of CN112558894A publication Critical patent/CN112558894A/zh
Application granted granted Critical
Publication of CN112558894B publication Critical patent/CN112558894B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/12—Digital output to print unit, e.g. line printer, chain printer
    • G06F3/1201—Dedicated interfaces to print systems
    • G06F3/1202—Dedicated interfaces to print systems specifically adapted to achieve a particular effect
    • G06F3/1203—Improving or facilitating administration, e.g. print management
    • G06F3/1208—Improving or facilitating administration, e.g. print management resulting in improved quality of the output result, e.g. print layout, colours, workflows, print preview
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/12—Digital output to print unit, e.g. line printer, chain printer
    • G06F3/1201—Dedicated interfaces to print systems
    • G06F3/1202—Dedicated interfaces to print systems specifically adapted to achieve a particular effect
    • G06F3/1203—Improving or facilitating administration, e.g. print management
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/12—Digital output to print unit, e.g. line printer, chain printer
    • G06F3/1201—Dedicated interfaces to print systems
    • G06F3/1223—Dedicated interfaces to print systems specifically adapted to use a particular technique
    • G06F3/1237—Print job management
    • G06F3/1268—Job submission, e.g. submitting print job order or request not the print data itself
    • G06F3/1272—Digital storefront, e.g. e-ordering, web2print, submitting a job from a remote submission screen

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Quality & Reliability (AREA)
  • Record Information Processing For Printing (AREA)

Abstract

本发明公开了一种基于canvas的动态网页打印方法方法、系统及存储介质，该方法包括以下步骤：获取打印指令，并根据所述打印指令克隆打印的目标文档对象模型以及递归取出所有所述目标文档对象模型的节点信息；根据所述节点信息确定canvas的渲染列队，并根据所述渲染列队将canvas渲染成图片；将所述图片替换所述目标文档对象模型，并执行打印操作。本发明实施例能够解决动态网页由于异步加载方式导致的打印空白问题。本发明实施例可广泛应用于计算机网络技术领域。

Description

基于canvas的动态网页打印方法、系统及存储介质
技术领域
本发明涉及计算机网络技术领域，尤其涉及一种基于canvas的动态网页打印方法、系统及存储介质。
背景技术
随着计算机网络技术领域的发展，越来越多的网站采用异步加载方式，如越来越多的网站通过JavaScript异步获取后端数据形成动态页面；如目前大量网站使用Element-UI、MUSE-UI、Vuetify等UI组件库，其中部分组件需要使用异步加载；如主流图表库Echarts等大多采用异步数据加载模式，并且使用动态样式。如果采用浏览器默认的打印功能或传统的打印方式无法获取异步加载的数据，而导致打印结果与浏览器所见内容不相符、样式错乱及部分空白等。
发明内容
有鉴于此，本发明实施例的目的是提供一种基于canvas的动态网页打印方法、系统及存储介质，能够解决动态网页由于异步加载方式导致的打印空白问题。
第一方面，本发明实施例提供了一种基于canvas的动态网页打印方法，包括以下步骤：
获取打印指令，并根据所述打印指令克隆打印的目标文档对象模型以及递归取出所有所述目标文档对象模型的节点信息；
根据所述节点信息确定canvas的渲染列队，并根据所述渲染列队将canvas渲染成图片；
将所述图片替换所述目标文档对象模型，并执行打印操作。
可选地，所述递归取出所有所述目标文档对象模型的节点信息，包括以下步骤：
递归取出所有所述目标文档对象模型的节点、节点内容、样式及属性信息；
根据所述节点、节点内容、样式及属性信息确定渲染列表。
可选地，所述根据所述节点信息确定canvas的渲染列队，包括以下步骤：
根据所述属性信息按照预设的规则对所述渲染列表排序确定所述渲染列队。
可选地，按照预设的规则对所述渲染列表排序确定所述渲染列队，包括以下步骤：
按照包括从外层到内层、从浅层到深层及从上层到下层的顺序对所述渲染列表排序确定所述渲染列队。
可选地，根据所述渲染列队将canvas渲染成图片，包括以下步骤：
遍历所述渲染列队，根据节点类型调用canvas API填充canvas；
根据canvas API将所述canvas渲染成图片。
可选地，所述根据节点类型调用canvas API填充canvas，包括以下步骤：
根据文字类型节点及输入框节点类型调用context.fillText；
根据图片类型节点、canvas对象类型节点及SVG类型节点都调用context.drawImage；
根据Iframe类型节点先调用new CanvasRender构造canvas对象，再调用context.drawImage。
可选地，还包括步骤：
打印完成后，将所述目标文档对象模型替换所述图片。
第二方面，本发明实施例提供了一种基于canvas的动态网页打印系统，包括：
获取模块，用于获取打印指令，并根据所述打印指令克隆打印的目标文档对象模型以及递归取出所有所述目标文档对象模型的节点信息；
渲染模块，用于根据所述节点信息确定canvas的渲染列队，并根据所述渲染列队将canvas渲染成图片；
打印模块，用于将所述图片替换所述目标文档对象模型，并执行打印操作。
第三方面，本发明实施例还提供了一种基于canvas的动态网页打印系统，包括：
至少一个处理器；
至少一个存储器，用于存储至少一个程序；
当所述至少一个程序被所述至少一个处理器执行，使得所述至少一个处理器实现上述的基于canvas的动态网页打印方法。
第四方面，本发明实施例还提供了一种存储介质，其中存储有处理器可执行的程序，所述处理器可执行的程序在由处理器执行时用于执行的基于canvas的动态网页打印方法。
实施本发明实施例包括以下有益效果：本发明实施例通过克隆打印的目标文档对象模型以及递归取出所有所述目标文档对象模型的节点信息，根据所述节点信息确定canvas的渲染列队，并根据所述渲染列队将canvas渲染成图片，将所述图片替换所述目标文档对象模型，打印图片；即通过canvas将动态网页转换图片进行打印，解决了动态网页由于异步加载方式导致的打印空白问题。
附图说明
图1是本发明实施例提供的一种基于canvas的动态网页打印方法的步骤流程示意图；
图2是本发明实施例提供的一种基于canvas的动态网页打印系统的结构框图；
图3是本发明实施例提供的另一种基于canvas的动态网页打印系统的结构框图。
具体实施方式
下面结合附图和具体实施例对本发明做进一步的详细说明。对于以下实施例中的步骤编号，其仅为了便于阐述说明而设置，对步骤之间的顺序不做任何限定，实施例中的各步骤的执行顺序均可根据本领域技术人员的理解来进行适应性调整。
如图1所示，本发明实施例提供了一种基于canvas的动态网页打印方法，包括以下步骤：
S100、获取打印指令，并根据所述打印指令克隆打印的目标文档对象模型以及递归取出所有所述目标文档对象模型的节点信息；
S200、根据所述节点信息确定canvas的渲染列队，并根据所述渲染列队将canvas渲染成图片；
S300、将所述图片替换所述目标文档对象模型，并执行打印操作。
需要说明的是，当用户点击网页上的打印按钮后，即获取了打印指令，一般使用javascript调用打印函数，克隆指javascript对象的深拷贝。
本领域技术人员可以理解的是，节点信息包括节点内容及样式等，如文字内容、字体颜色、字体大小等，还包括是否为顶层元素、是否为包含内容的容器、是否为canvas元素及是否为纯文字等信息。多个节点的样式形成层叠样式表。
需要说明的是，执行打印操作，只需调用网页打印API windows.print()即可获取正确的打印结果。
实施本发明实施例包括以下有益效果：本发明实施例通过克隆打印的目标文档对象模型以及递归取出所有所述目标文档对象模型的节点信息，根据所述节点信息确定canvas的渲染列队，并根据所述渲染列队将canvas渲染成图片，将所述图片替换所述目标文档对象模型，打印图片；即通过canvas将动态网页转换图片进行打印，解决了动态网页由于异步加载方式导致的打印空白问题。
可选地，所述递归取出所有所述目标文档对象模型的节点信息，包括以下步骤：
递归取出所有所述目标文档对象模型的节点、节点内容、样式及属性信息；
根据所述节点、节点内容、样式及属性信息确定渲染列表。
需要说明的是，属性信息包括是否为顶层元素、是否为包含内容的容器、是否为canvas元素及是否为纯文字等信息。
可选地，所述根据所述节点信息确定canvas的渲染列队，包括以下步骤：
根据所述属性信息按照预设的规则对所述渲染列表排序确定所述渲染列队。
具体地，通过z-index、position、float等层叠样式表属性、元素的层级信息以及分页标识类信息将渲染列表排序确定渲染列队。
需要说明的是，浏览器一般是根据用户设置的页面样式、大小及web页面内容的多少来自行决定分页位置，因此不能根据需求自定义分页；本实施方式中分页标识类信息可以实现精准分页。
可选地，按照预设的规则对所述渲染列表排序确定所述渲染列队，包括以下步骤：
按照包括从外层到内层、从浅层到深层及从上层到下层的顺序对所述渲染列表排序确定所述渲染列队。
可选地，根据所述渲染列队将canvas渲染成图片，包括以下步骤：
遍历所述渲染列队，根据节点类型调用canvas API填充canvas；
根据canvas API将所述canvas渲染成图片。
具体地，遍历渲染列队，将层叠样式表样式转为canvasContext.setFillStyle可识别的参数后，依据节点类型调用相应的canvas API。使用canvas API的canvas.toDataURL()将canvas渲染成图片，使用图片替换原有文档对象模型。
可选地，所述根据节点类型调用canvas API填充canvas，包括以下步骤：
根据文字类型节点及输入框节点类型调用context.fillText；
根据图片类型节点、canvas对象类型节点及SVG类型节点(SVGElementContainer)都调用context.drawImage；
根据Iframe类型节点(IframeElementContainer)先调用new CanvasRender构造canvas对象，再调用context.drawImage。
可选地，还包括步骤：
打印完成后，将所述目标文档对象模型替换所述图片。
本领域技术人员可以理解的是，打印完成后，为不影响网页的正常使用，将将所述目标文档对象模型替换所述图片，将动态网页恢复到原始状态。
下面以一具体实施例说明根据目标打印网页生成的渲染列表。
如目标打印网页主要代码如下：
Figure BDA0002853120120000041
Figure BDA0002853120120000051
生成渲染列表形式如下：[<table>，<cogroup>，<tr>，<tr>，<th>，<th>，<th>，<th>，<td>，<td>，<td>]。
如图2所示，本发明实施例提供了一种基于canvas的动态网页打印系统，包括：
获取模块，用于获取打印指令，并根据所述打印指令克隆打印的目标文档对象模型以及递归取出所有所述目标文档对象模型的节点信息；
渲染模块，用于根据所述节点信息确定canvas的渲染列队，并根据所述渲染列队将canvas渲染成图片；
打印模块，用于将所述图片替换所述目标文档对象模型，并执行打印操作。
可见，上述方法实施例中的内容均适用于本系统实施例中，本系统实施例所具体实现的功能与上述方法实施例相同，并且达到的有益效果与上述方法实施例所达到的有益效果也相同。
如图3所示，本发明实施例还提供了一种基于canvas的动态网页打印系统，包括：
至少一个处理器；
至少一个存储器，用于存储至少一个程序；
当所述至少一个程序被所述至少一个处理器执行，使得所述至少一个处理器实现上述的基于canvas的动态网页打印方法。
可见，上述方法实施例中的内容均适用于本系统实施例中，本系统实施例所具体实现的功能与上述方法实施例相同，并且达到的有益效果与上述方法实施例所达到的有益效果也相同。
此外，本申请实施例还公开了一种计算机程序产品或计算机程序，计算机程序产品或计算机程序存储在计算机可读存介质中。计算机设备的处理器可以从计算机可读存储介质读取该计算机程序，处理器执行该计算机程序，使得该计算机设备执行上述的基于canvas的动态网页打印方法。同样地，上述方法实施例中的内容均适用于本存储介质实施例中，本存储介质实施例所具体实现的功能与上述方法实施例相同，并且达到的有益效果与上述方法实施例所达到的有益效果也相同。
以上是对本发明的较佳实施进行了具体说明，但本发明创造并不限于所述实施例，熟悉本领域的技术人员在不违背本发明精神的前提下还可做作出种种的等同变形或替换，这些等同的变形或替换均包含在本申请权利要求所限定的范围内。

Claims (10)

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的动态网页打印方法。
CN202011536167.1A 2020-12-23 2020-12-23 基于canvas的动态网页打印方法、系统及存储介质 Active CN112558894B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202011536167.1A CN112558894B (zh) 2020-12-23 2020-12-23 基于canvas的动态网页打印方法、系统及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202011536167.1A CN112558894B (zh) 2020-12-23 2020-12-23 基于canvas的动态网页打印方法、系统及存储介质

Publications (2)

Publication Number Publication Date
CN112558894A true CN112558894A (zh) 2021-03-26
CN112558894B CN112558894B (zh) 2021-11-12

Family

ID=75031507

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202011536167.1A Active CN112558894B (zh) 2020-12-23 2020-12-23 基于canvas的动态网页打印方法、系统及存储介质

Country Status (1)

Country Link
CN (1) CN112558894B (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN118170332A (zh) * 2024-05-14 2024-06-11 冠骋信息技术(苏州)有限公司 打印浏览器内容方法及系统

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US8225197B1 (en) * 2011-06-22 2012-07-17 Google Inc. Rendering approximate webpage screenshot client-side
CN102789484A (zh) * 2012-06-28 2012-11-21 奇智软件（北京）有限公司 一种网页信息处理方法和装置
CN111309671A (zh) * 2019-12-04 2020-06-19 珠海派诺科技股份有限公司 一种web报表导出PDF的方法、装置及存储介质
CN111859865A (zh) * 2020-06-30 2020-10-30 深圳市中农易讯信息技术有限公司 用于转换pdf文档的方法、装置、终端及介质

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US8225197B1 (en) * 2011-06-22 2012-07-17 Google Inc. Rendering approximate webpage screenshot client-side
CN102789484A (zh) * 2012-06-28 2012-11-21 奇智软件（北京）有限公司 一种网页信息处理方法和装置
CN111309671A (zh) * 2019-12-04 2020-06-19 珠海派诺科技股份有限公司 一种web报表导出PDF的方法、装置及存储介质
CN111859865A (zh) * 2020-06-30 2020-10-30 深圳市中农易讯信息技术有限公司 用于转换pdf文档的方法、装置、终端及介质

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
鲤鱼和龙虾: "前端通过html2canvas打印echarts图表", 《HTTPS://BLOG.CSDN.NET/LXJ7607/ARTICLE/DETAILS/100928938》 *

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN118170332A (zh) * 2024-05-14 2024-06-11 冠骋信息技术(苏州)有限公司 打印浏览器内容方法及系统

Also Published As

Publication number Publication date
CN112558894B (zh) 2021-11-12

Similar Documents

Publication Publication Date Title
KR101955732B1 (ko) 캡처된 이미지 데이터를 스프레드시트와 연관시키는 방법
US7469378B2 (en) Layout system, layout program, and layout method
CN109658485B (zh) 网页动画绘制方法、装置、计算机设备和存储介质
US20040237030A1 (en) System and method of implementing calculation fields in an electronic form
US7619772B2 (en) Document processing apparatus, control program, and control method of displaying information related to each chapter in document data
US20040237040A1 (en) System and method of processing an electronic form using layered aspects
US20100202010A1 (en) Method and system for printing a web page
US9117314B2 (en) Information output apparatus, method, and recording medium for displaying information on a video display
US20100321715A1 (en) Methods and structure for preserving node order when storing xml data in a key-value data structure
JP2004139466A (ja) 電子ドキュメント印刷プログラムおよび電子ドキュメント印刷システム
US20080282148A1 (en) Processing method for increasing speed of opening a word processing document
US6175843B1 (en) Method and system for displaying a structured document
CN111859865A (zh) 用于转换pdf文档的方法、装置、终端及介质
CN112558894B (zh) 基于canvas的动态网页打印方法、系统及存储介质
CN113297425B (zh) 文档转换方法、装置、服务器及存储介质
CN114791988A (zh) 一种基于浏览器的pdf文件解析方法、系统、存储介质
US8060490B2 (en) Analyzer engine
JP2002189627A (ja) 文書データの変換方法
CN110928540A (zh) 一种页面生成方法及装置
US8578268B2 (en) Rendering electronic documents having linked textboxes
US20110016380A1 (en) Form editing apparatus, form editing method, and storage medium
US20170286378A1 (en) Inserting text and graphics using hand markup
CN108170651B (zh) 一种信息处理的方法
US20030154462A1 (en) Software maintenance material generation apparatus and generation program therefor
CN109376806A (zh) 一种基于网页智能检测网页文字的方法以及电子设备

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant
PE01 Entry into force of the registration of the contract for pledge of patent right

Denomination of invention: Dynamic web page printing method, system and storage medium based on canvas

Effective date of registration: 20221021

Granted publication date: 20211112

Pledgee: Industrial Bank Co.,Ltd. Guangzhou Development Zone sub branch

Pledgor: Guangzhou Dingjia Computer Technology Co.,Ltd.

Registration number: Y2022980018838

PE01 Entry into force of the registration of the contract for pledge of patent right