CN117289880A - 一种打印web页面的方法及系统 - Google Patents

Abstract

本发明涉及计算机网络技术领域，更具体地，本发明涉及一种打印WEB页面的方法及系统，在网页中添加一个打印入口，并设置一个隐藏的内联框架，该方法包括当用户触发打印入口并在当前WEB页面选定区域时，搜索用户选定的区域中的页面元素；调用内联框架并克隆用户选定的区域中的内容并插入到内联框架中；获取用户针对所述内联框架中待打印内容的打印配置；基于所述打印配置对所述内联框架中的元素进行调整，以得到预打印页面；响应于接收到打印命令，将所述预打印页面输出至打印接口以进行打印操作。根据本发明的方案，解决了目前的WEB网页打印方式兼容差且无法灵活打印的问题。

Description

一种打印WEB页面的方法及系统

技术领域

本发明一般地涉及计算机网络技术领域。更具体地，本发明涉及一种打印WEB页面的方法及系统。

背景技术

随着网络技术的不断发展，WEB页面成为互联网最广泛的服务载体，在网络上进行资料的存储和管理已成为人们的日常选择。而网页打印是从网页上获取资料的方式之一。

目前的网页打印方法有使用浏览器打印和使用打印软件打印。主要包括以下几种方式：

1、服务端生成PDF：将要打印的内容生成为PDF格式，然后将生成的PDF文件提供给用户下载或在浏览器中展示。这种方法可以使用各种后端语言和库来生成PDF，如Python中的pdfkit、Node.js中的pdfmake，或Java中的iText等。

2、打印HTML页面：在后端将要打印的内容生成为HTML页面，并使用浏览器自动打印功能进行打印。这种方法通常会借助无头浏览器(Headless Browser)，如Puppeteer(Node.js)、Selenium(多语言支持)等，模拟用户打开页面并触发浏览器的打印功能。

3、打印API：使用第三方打印服务提供商的API，将要打印的内容发送到该API，由其负责生成打印结果。例如，可以使用Google Cloud Print API或PrintNode API来实现。

4、文件转发打印：用户上传待打印的文件到后端，然后后端将文件发送到打印机进行打印。这种方法需要与打印机进行通信，可以通过打印机的网络接口或打印机驱动程序来实现。

5、WebSocket实时打印：通过WebSocket协议在后端与前端建立实时通信连接，并将要打印的内容通过该连接传输到前端，再由前端使用浏览器的打印功能进行打印。

然而，这几种打印方式对相应的浏览器、前端、后台和操作方式等各个方面均有较高的要求。而且对于浏览器打印等方式也仅仅只能打印整页的内容，而无法实现局部打印。

因此，如何解决目前的WEB网页打印方式兼容差且无法灵活打印的问题，是目前研究的重点。

发明内容

为解决上述一个或多个技术问题，本发明提出通过将定义一个实现打印功能的插件，通过调用相应的打印方法实现用户可选择的打印方式，有效提升了网页打印的灵活性，同时该方法适用于各种WEB网页，具有较高的兼容性。为此，本发明在如下的多个方面中提供方案。

在第一方面中，本发明提供了一种打印WEB页面的方法，在网页中添加一个打印入口，并设置一个隐藏的内联框架，该方法包括：当用户触发打印入口并在当前WEB页面选定区域时，搜索用户选定的区域中的页面元素；调用内联框架并克隆用户选定的区域中的内容并插入到内联框架中；获取用户针对所述内联框架中待打印内容的打印配置；基于所述打印配置对所述内联框架中的元素进行调整，以得到预打印页面；响应于接收到打印命令，将所述预打印页面输出至打印接口以进行打印操作。

在一个实施例中，调用内联框架并克隆用户选定的区域中的内容并插入到内联框架中包括：遍历用户选定的区域中的元素，以获取样式和HTML内容；将获取的样式和HTML内容写入所述内联框架中，以在内联框架对应的窗体中进行显示。

在一个实施例中，在内联框架对应的窗体中显示的内容包括网页的样式、文本字符串和表达式的值。

在一个实施例中，所述打印入口包括打印按钮或其他可调用打印功能的触发器。

在一个实施例中，获取样式和HTML内容包括：检索包括style标签和link标签在内的所有样式，并添加一个CSS规则以隐藏具有.no-print类的元素；检索包括input、textarea和select在内的表单元素，并确定这些表单元素的当前状态。

在一个实施例中，基于所述打印配置对所述内联框架中的元素进行调整，以得到预打印页面包括：在内联框架对应的打印配置界面中显示打印配置的方式，打印配置包括表单、对话框以及允许用户选择打印选项；监听用户在打印配置界面上的选择，并将用户的打印配置选项收集为一个打印配置对象；将打印配置对象传递给内联框架中的打印方法或函数；在内联框架中，接收打印配置对象，并根据用户的选择对元素进行调整，以生成预打印页面。

在一个实施例中，根据用户的选择对元素进行调整包括：根据用户选择的页面大小和方向，设置内联框架中的页面大小和方向属性；根据用户选择的配置，隐藏或显示特定的元素；和/或根据用户选择的配置，更改某些元素的字体大小、颜色或其他样式属性。

在一个实施例中，其中生成预打印页面包括：将调整后的元素内容复制到一个新的页面或生成一个PDF文件。

在一个实施例中，打印命令包括用户触发打印按钮生成的打印命令，和/或调用WEB页面自身的打印方法所生成的打印命令，所述方法还包括：判断WEB页面内的打印按钮是否成功生成打印命令，如果不成功，则调用自身的打印方法进行打印操作。

在第二方面中，本发明还提供了一种打印WEB页面的系统，包括：处理器；以及存储器，其中存储器存储有用于打印WEB页面的计算机程序指令，当所述计算机程序指令被所述处理器执行时实现根据本发明第一方面所述的打印WEB页面的方法。

本发明的有益效果在于：通过在网页中添加一个打印入口，并设置一个隐藏的内联框架，并设计网页打印的实例方法，在打印时通过调用该打印方法可以实现整体或局部的打印需求，同时，该方法可以实现任何形式的WEB页面的打印，具有较高的兼容性。

附图说明

通过参考附图阅读下文的详细描述，本发明示例性实施方式的上述以及其他目的、特征和优点将变得易于理解。在附图中，以示例性而非限制性的方式示出了本发明的若干实施方式，并且相同或对应的标号表示相同或对应的部分，其中：

图1是示意性示出根据本发明的实施例的打印WEB页面的方法的流程图；

图2是示意性示出根据本发明的实施例的预打印页面的配置过程的流程图；

图3是示意性示出根据本发明的实施例的根据用户的选择对元素进行调整的方法的流程图；

图4是示意性示出根据本发明的实施例的打印WEB页面的系统的示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

下面结合附图来详细描述本发明的具体实施方式。

图1是示意性示出根据本发明的实施例的打印WEB页面的方法100的流程图。根据本发明的上下文，本发明的方案中可以在网页中添加一个打印按钮，当用户点击该按钮时，就会将当前网页的内容写入一个iframe中，并打印该iframe的内容。通过定义一个名为Print的JavaScript对象，这个Print对象可以通过传递一个DOM元素或选择器和一些配置选项来进行初始化。通过将$print方法集成在Vue插件，通过Vue插件调用$print方法来触发网页打印功能。通过该设置过程不仅能够实现全局打印，还可以实现对网页内某个区域的自由打印过程。

具体地，该方法具体采用以下步骤：

如图1所示，在网页中添加一个打印入口，并设置一个隐藏的内联框架。该打印入口包括打印按钮或其他可调用打印功能的触发器。在一些实施例中，该打印入口可以配置成部分打印入口或全局打印入口，或者是不分打印入口或全局打印入口的组合。

在步骤S101处，当用户触发打印入口并在当前WEB页面选定区域时，搜索用户选定的区域中的页面元素。当前WEB页面选定区域可以是局部区域也可以是全部区域。在一个应用场景中，当用户点击部分打印入口对应的按钮之后，用户可以使用鼠标等操作控件在页面上移动，以在当前WEB页面中选定要打印的区域。

在步骤S102处，调用内联框架(Inline Frame或iframe)并克隆用户选定的区域中的内容并插入到内联框架中。在一个实施例中，可以首先遍历用户选定的区域中的元素，以获取样式和HTML内容，然后将获取的样式和HTML内容写入所述内联框架中，以在内联框架对应的窗体中进行显示。其中，在内联框架对应的窗体中显示的内容包括网页的样式、文本字符串和表达式的值。

在一些实施例中，获取样式和HTML内容的方式具体为：首先，检索包括style标签和link标签在内的所有样式，并添加一个CSS规则以隐藏具有.no-print类的元素。然后，检索包括input、textarea和select在内的表单元素，并确定这些表单元素的当前状态。

在步骤S103处，获取用户针对内联框架中待打印内容的打印配置。在一些实施例中，内联框架对应有相应的显示窗口，可以在WEB页面中显示，例如可以悬浮设置于页面的上方。该窗口可以设置待打印内容的参数调整信息，使得用户可以根据自身需求选择相应的参数和打印方式。例如页面大小、清晰度、颜色等。

在步骤S104处，基于打印配置对所述内联框架中的元素进行调整，以得到预打印页面。在获取到用户的打印配置后，可以基于设置参数等进行调整，从而形成合适的预打印页面。

在步骤S105处，响应于接收到打印命令，将所述预打印页面输出至打印接口以进行打印操作。在一些实施例中，生成预打印页面包括将调整后的元素内容复制到一个新的页面或生成一个PDF文件。

在一些实施例中，该打印命令包括用户触发打印按钮生成的打印命令，和/或调用WEB页面自身的打印方法所生成的打印命令。在实际操作过程中，首先判断WEB页面内的打印按钮是否成功生成打印命令，如果不成功，则调用自身的打印方法进行打印操作。

图2是示意性示出根据本发明的实施例的预打印页面的配置过程200的流程图。

如图2所示，在步骤S201处，在内联框架对应的打印配置界面中显示打印配置的方式。打印配置包括表单、对话框以及允许用户选择打印选项。在内联框架(Inline Frame)对应的打印配置界面中，显示打印配置的方式取决于所使用的WEB浏览器。一般而言，浏览器会提供一个内建的打印预览功能，通过该功能用户可以查看和配置打印选项。

在步骤S202处，监听用户在打印配置界面上的选择，并将用户的打印配置选项收集为一个打印配置对象。在一些实施例中，当用户点击内联框架中的打印按钮或选择浏览器菜单中的打印选项时，浏览器会打开一个打印预览窗口，即内联框架对应的窗口。在该窗口中，用户可以进行页面布局(例如打印方向、页面大小、边距等)、打印内容(选择打印整体还是局部)、样式和排版(例如颜色、自体、背景图像等)、标题和页码、打印参数(例如需要配置的打印机、份数、速度等)。

在步骤S203处，将打印配置对象传递给内联框架中的打印方法或函数。在一些实施例中，可以基于JavaScript来实现该过程。具体地，首先可以使用JavaScript获取内联框架的引用。通过使用DOM API中的document.getElementById或document.querySelector方法，根据内联框架的id或其他选择器来获取对应的元素。然后获取内联框架中的打印文档对象。可以通过内联框架的引用，获取其内容窗口(contentWindow)对象，然后再获取其document对象，以便于后续的打印操作。接下来，可以通过修改内联框架中的打印文档对象的打印配置，来实现所需的打印设置。最后，调用内联框架中的打印方法或函数，以触发打印操作。

在步骤S204处，在内联框架中，接收打印配置对象，并根据用户的选择对元素进行调整，以生成预打印页面。在一些实施例中，可以通过设置preparePrint函数来实现预打印页面。首先获取内联框架的引用并获取其文档对象。然后，调用getPrintConfig函数来获取打印配置对象，并调用applyPrintConfig函数将打印配置应用到内联框架中的元素，从而实现对预打印页面的配置。最后，调用内联框架的print方法来触发打印操作。

图3是示意性示出根据本发明的实施例的根据用户的选择对元素进行调整的方法的流程图。

如图3所示，在步骤S301处，根据用户选择的页面大小和方向，设置内联框架中的页面大小和方向属性。

在步骤S302处，根据用户选择的配置，隐藏或显示特定的元素。

在步骤S303处，根据用户选择的配置，更改某些元素的字体大小、颜色或其他样式属性。

需要说明的是，上述步骤S301至步骤S303的执行顺序本发明并不做限制，用户可以根据自身需求或习惯选择对应的配置顺序，对于未进行调整的内容，可按照默认参数配置进行设置，从而实现样式等的调整。

接下来将结合具体地程序设置对本发明的方案进行进一步说明。

在实际操作过程中，可以基于上述方法步骤，在网页中添加一个"Print"按钮和一个隐藏的iframe，然后定义了一个Print函数，通过克隆当前要打印的内容并插入到iframe中，并设置相关的打印配置。然后，在示例中通过原生JavaScript监听按钮的点击事件，点击按钮时调用Print函数实现打印功能。另外，还演示了如何将打印功能封装成Vue插件，并在Vue实例中通过$print方法调用打印功能。

具体地，该$print方法中包括以下内容。首先，在需要打印的页面中添加一个打印按钮或者其他触发器来调用$print方法。该方法中需要通过以下几个函数实现。

Init函数：用于提供初始化方法，获取网页的样式和HTML内容，并将其写入一个iframe中。

Extend函数：用于提供对象合并方法，将两个对象合并成一个。

getStyle函数：获取网页的样式方法，包括style和link标签，并添加一个CSS规则以隐藏具有.no-print类的元素。

getHtml函数：用于获取网页的HTML内容方法，包括input、textarea和select等表单元素，并更新它们的属性以反映它们的当前状态。此外，该方法还将要打印的元素包装在父元素中以确保根级别CSS选择器的正确应用。

wrapperRefDom函数：用于向父级元素循环，包裹当前需要打印的元素以防止根级别开头的CSS选择器不生效。

writeIframe函数：用于将网页内容写入iframe的方法，并在iframe加载完成后调用toPrint方法进行打印。

toPrint函数：用于执行打印操作的方法，首先尝试使用浏览器的打印命令，如果不成功则调用自身的打印方法。

isInBody函数：用于检查一个元素是否是body元素的后代元素且非body元素本身。

isDOM函数：用于检查一个对象是否是DOM元素。

MyPlugin对象是一个Vue插件，其中定义了一个install方法，用于将$print方法添加到Vue实例中。

在一个实施例中，根据上述中的各函数，在Vue组件中使用$print方法来触发打印：用户在Vue组件中使用$print方法来触发打印。$print方法首先获取组件中的样式和HTML内容。然后将样式和HTML内容写入一个iframe中。最后执行浏览器的打印命令或者调用自身的打印方法来实现网页打印的功能。

在另一个实施例中，可以首先将该打印方法引用至全局在Vue项目中的任意页面使用。接着根据用户的触发操作调用打印的方法，并传入用户选定的选择器或DOM元素(包括HTML/XHTML/XML的格式，以及浏览器状态)。将用户的选择所对应的代码块或DOM元素放入预先创建的容器iframe对应的iframe元素中，接着调用相应的方法实现打印操作。

在上述实施例中，该VUE插件的入口文件是MyPlugin，它是一个空对象，用于添加Vue插件的方法。

MyPlugin.install方法用于添加Vue插件。该方法接收两个参数：Vue和options。

Vue.prototype.$print方法用于在Vue实例中调用打印功能。该方法接收两个参数：dom和options。

Print构造函数用于创建打印对象。它接收两个参数：dom和options。如果dom参数是字符串，则使用document.querySelector方法获取DOM元素；否则，检查dom是否是DOM元素，如果不是则使用$el属性获取DOM元素。

Print.prototype.init方法用于初始化打印对象。它调用getStyle和getHtml方法获取样式和HTML内容，然后将它们写入一个iframe中。

Print.prototype.getStyle方法用于获取页面中的样式。它使用document.querySelectorAll方法获取所有的<style>和<link>元素，然后将它们的outerHTML拼接成一个字符串。如果options中指定了noPrint属性，则将其拼接到字符串的末尾。

Print.prototype.getHtml方法用于获取页面中的HTML内容。它使用document.querySelectorAll方法获取所有的<input>、<textarea>和<select>元素，然后将它们的属性和值设置为需要打印的内容，并返回包裹需要打印的元素的outerHTML。

Print.prototype.wrapperRefDom方法用于向父级元素循环，包裹当前需要打印的元素。这样可以防止根级别开头的CSS选择器不生效。

Print.prototype.writeIframe方法用于将样式和HTML内容写入一个iframe中。它创建一个iframe元素，并将其添加到body中。然后获取iframe的contentWindow和contentDocument对象，并将样式和HTML内容写入contentDocument中。

Print.prototype.toPrint方法用于触发浏览器的打印命令。它首先将焦点设置到iframe上，然后尝试执行浏览器的打印命令。如果浏览器不支持该命令，则调用iframe的print方法。

Print.prototype.isInBody方法用于检查一个元素是否是body元素的后代元素且非body元素本身。

Print.prototype.isDOM方法用于检查一个对象是否是DOM元素。它先判断是否存在HTMLElement对象，如果存在则使用instanceof操作符判断；否则，使用节点类型和节点名称判断。

图4是示意性示出根据本实施例中的一种打印WEB页面的系统的结构框图。

本发明还提供了一种打印WEB页面的系统。如图4所示，所述系统包括处理器和存储器，所述存储器存储有计算机程序指令，当所述计算机程序指令被所述处理器执行时实现根据本发明第一方面所述的打印WEB页面的方法。

所述系统还包括通信总线和通信接口等本领域技术人员熟知的其他组件，其设置和功能为本领域中已知，因此在此不再赘述。

在本发明中，前述的存储器可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。例如，计算机可读存储介质可以是任何适当的磁存储介质或者磁光存储介质，比如，阻变式存储器RRAM(Resistive RandomAccess Memory)、动态随机存取存储器DRAM(Dynamic Random Access Memory)、静态随机存取存储器SRAM(Static Random-Access Memory)、增强动态随机存取存储器EDRAM(Enhanced Dynamic Random Access Memory)、高带宽内存HBM(High-Bandwidth Memory)、混合存储立方HMC(Hybrid Memory Cube)等等，或者可以用于存储所需信息并且可以由应用程序、模块或两者访问的任何其他介质。任何这样的计算机存储介质可以是设备的一部分或可访问或可连接到设备。本发明描述的任何应用或模块可以使用可以由这样的计算机可读介质存储或以其他方式保持的计算机可读/可执行指令来实现。

在本说明书的描述中，“多个”、“若干个”的含义是至少两个，例如两个，三个或更多个等，除非另有明确具体的限定。

虽然本说明书已经示出和描述了本发明的多个实施例，但对于本领域技术人员显而易见的是，这样的实施例只是以示例的方式提供的。本领域技术人员会在不偏离本发明思想和精神的情况下想到许多更改、改变和替代的方式。应当理解的是在实践本发明的过程中，可以采用对本文所描述的本发明实施例的各种替代方案。

Claims (10)

1.一种打印WEB页面的方法，其特征在于，在网页中添加一个打印入口，并设置一个隐藏的内联框架，该方法包括：

当用户触发打印入口并在当前WEB页面选定区域时，搜索用户选定的区域中的页面元素；

调用内联框架并克隆用户选定的区域中的内容并插入到内联框架中；

获取用户针对所述内联框架中待打印内容的打印配置；

基于所述打印配置对所述内联框架中的元素进行调整，以得到预打印页面；

响应于接收到打印命令，将所述预打印页面输出至打印接口以进行打印操作。

2.根据权利要求1所述的打印WEB页面的方法，其特征在于，调用内联框架并克隆用户选定的区域中的内容并插入到内联框架中包括：

遍历用户选定的区域中的元素，以获取样式和HTML内容；

将获取的样式和HTML内容写入所述内联框架中，以在内联框架对应的窗体中进行显示。

3.根据权利要求2所述的打印WEB页面的方法，其特征在于，在内联框架对应的窗体中显示的内容包括网页的样式、文本字符串和表达式的值。

4.根据权利要求1所述的打印WEB页面的方法，其特征在于，所述打印入口包括打印按钮或其他可调用打印功能的触发器。

5.根据权利要求2所述的打印WEB页面的方法，其特征在于，获取样式和HTML内容包括：

检索包括style标签和link标签在内的所有样式，并添加一个CSS规则以隐藏具有.no-print类的元素；

检索包括input、textarea和select在内的表单元素，并确定这些表单元素的当前状态。

6.根据权利要求1所述的打印WEB页面的方法，其特征在于，基于所述打印配置对所述内联框架中的元素进行调整，以得到预打印页面包括：

在内联框架对应的打印配置界面中显示打印配置的方式，打印配置包括表单、对话框以及允许用户选择打印选项；

监听用户在打印配置界面上的选择，并将用户的打印配置选项收集为一个打印配置对象；

将打印配置对象传递给内联框架中的打印方法或函数；

在内联框架中，接收打印配置对象，并根据用户的选择对元素进行调整，以生成预打印页面。

7.根据权利要求6所述的打印WEB页面的方法，其特征在于，根据用户的选择对元素进行调整包括：

根据用户选择的页面大小和方向，设置内联框架中的页面大小和方向属性；

根据用户选择的配置，隐藏或显示特定的元素；和/或

根据用户选择的配置，更改某些元素的字体大小、颜色或其他样式属性。

8.根据权利要求6所述的打印WEB页面的方法，其特征在于，其中生成预打印页面包括：

将调整后的元素内容复制到一个新的页面或生成一个PDF文件。

9.根据权利要求1所述的打印WEB页面的方法，其特征在于，打印命令包括用户触发打印按钮生成的打印命令，和/或调用WEB页面自身的打印方法所生成的打印命令，所述方法还包括：

判断WEB页面内的打印按钮是否成功生成打印命令，如果不成功，则调用自身的打印方法进行打印操作。

10.一种打印WEB页面的系统，其特征在于，包括：

处理器；以及

存储器，其中存储器存储有用于打印WEB页面的计算机程序指令，当所述计算机程序指令被所述处理器执行时实现根据权利要求1-9任意一项所述的打印WEB页面的方法。