CN104461412A - web网页指定区域打印方法和*** - Google Patents

Abstract

本发明提供一种web网页指定区域打印方法和***，其中方法包括以下步骤：截取web网页指定区域的超文本标记语言代码和网页样式文件，并创建网页脚本代码；将所述超文本标记语言代码合并成超文本标记语言的结构字符串；创建打印预览窗口，将所述结构字符串、网页样式文件、网页脚本代码置入所述打印预览窗口的对象中进行渲染成新的网页界面；在新的网页界面上根据所述网页样式文件将所述超文本标记语言结构字符串转为图片；打印所述图片。上述方法，在截取超文本标记语言代码和网页样式文件的基础上，通过调用自带的打印组件实现网页指定区域打印，使得需要执行的代码简洁且加载的软件体积较小，从而提高了打印的效率。

Description

web网页指定区域打印方法和***

技术领域

本发明涉及计算机网络技术领域，特别是涉及一种web网页指定区域打印方法和web网页指定区域打印***。

背景技术

随着网络技术的不断发展，在网络上进行资料存储和管理已经成为人们的日常选择。网页打印是从网页上获取资料的众多方法之一。

现有的网页打印方法一般有以下几种：第一种：通过调用web browser控件进行打印；这种打印方式无法实现打印分页。第二种：纯使用外部css(CascadingStyle Sheets，层叠样式表)控制html(HyperText Mark-up Language，超文本标记语言)文档的输出打印；这种打印方式由于Html代码冗余，只是利用css隐藏非打印区域，影响打印效率。第三种：从服务器端下载PDF(Portable DocumentFormat，可移植文档格式)，再利用IE(Internet Explorer)浏览器的adobe插件进行打印；这种打印方式与服务器通信，过度依赖于网络，下载时间不稳定，且加载的插件体积较大，影响打印效率。

综合上述分析，上述的这几种网页打印方式由于代码冗余以及加载的插件体积较大，在web网页指定区域打印的功能实现上效率较低。

发明内容

基于此，有必要针对现有web网页指定区域打印功能实现效率较低问题，提供一种web网页指定区域打印方法和web网页指定区域打印***。

一种web网页指定区域打印方法，包括以下步骤：

截取web网页指定区域的超文本标记语言代码和网页样式文件，并创建网页脚本代码，将所述超文本标记语言代码合并成超文本标记语言的结构字符串；

创建打印预览窗口，并将所述结构字符串、网页样式文件和网页脚本代码置入所述打印预览窗口的对象中进行渲染成新的网页界面，并得到页面脚本代码；

在新的网页界面上运行所述页面脚本代码，根据所述网页样式文件将所述超文本标记语言结构字符串转为图片；

打印所述图片。

一种web网页指定区域打印***，包括：

截取模块，用于截取web网页指定区域的超文本标记语言代码和网页样式文件，并创建网页脚本代码，将所述超文本标记语言代码合并成超文本标记语言的结构字符串；

渲染模块，用于创建打印预览窗口，并将所述结构字符串、网页样式文件和网页脚本代码置入所述打印预览窗口的对象中进行渲染成新的网页界面，并得到页面脚本代码；

转化模块，用于在新的网页界面上运行所述页面脚本代码，根据所述网页样式文件将所述超文本标记语言结构字符串转为图片；

打印模块，用于打印所述图片。

上述web网页指定区域打印方法和web网页指定区域打印***，通过截取用户预打印网页区域的超文本标记语言代码和网页样式文件，并将其置入新开的打印预览窗口的对象(document)中，然后运行页面脚本代码按照网页样式文件的格式将超文本标记语言转化为图片，最后进行打印。在截取预打印网页区域的超文本标记语言代码和网页样式文件的基础上，打印所述图片使得需要执行的代码较简洁以及加载的软件体积较小，从而提高了打印的效率以及减轻了代码的冗余度。

附图说明

图1为一实施例web网页指定区域打印方法流程图；

图2为一实施例web网页指定区域打印***结构示意图。

具体实施方式

下面结合附图对本发明的web网页指定区域打印方法和web网页指定区域打印***的具体实施方式作详细描述。

请参阅图1，图1为一实施例web网页指定区域打印方法流程图。

一种web网页指定区域打印方法，包括以下步骤：

步骤S101：截取web网页指定区域的超文本标记语言代码和网页样式文件，并创建网页脚本代码；将所述超文本标记语言代码合并成超文本标记语言的结构字符串；

在步骤S101中，超文本标记语言代码指的是标准通用标记语言下的一个应用，网页样式文件一般指的是网页中的css样式文件。

在一实施例中，所述截取web网页指定区域的超文本标记语言代码和网页样式文件的步骤可以包括：

在webkit内核浏览器的网页上，运行网页JavaScript代码，截取web网页指定区域的超文本标记语言代码和网页样式文件。

Webkit内核浏览器指的是使用webkit引擎的浏览器，比如chrome浏览器；webkit内核浏览器自带的JavaScript代码比较简洁易用，通过运行网页JavaScript代码进行截取，可以提高截取超文本标记语言代码和网页样式文件的效率。

步骤S103：创建打印预览窗口，并将所述结构字符串、网页样式文件和网页脚本代码置入所述打印预览窗口的对象中进行渲染成新的网页界面，并得到页面脚本代码；

在步骤S103中，对象指的是载入浏览器的HTML文档所形成的Document对象，进行渲染的目的是为了将打印区域的图像显示出来，为后续打印成图片提供依据。

在一实施例中，所述进行渲染成新的网页界面的步骤之前还可以包括：

将自定义样式文件置入打印预览窗口的对象中，合并所述网页样式文件与自定义样式文件，形成打印样式文件；

在新的网页界面上运行所述页面脚本代码，根据所述打印样式文件将所述超文本标记语言结构字符串转为图片。

自定义样式文件中可以包含对颜色进行限定的样式文件等，通过合并所述网页样式文件与自定义样式文件可以按照需求调整所需要打印的区域的样式。

步骤S105：在新的网页界面上运行所述页面脚本代码根据所述网页样式文件将所述超文本标记语言结构字符串转为图片；

在一实施例中，所述在新的网页界面上运行所述页面脚本代码根据所述网页样式文件将所述超文本标记语言结构字符串转为图片的步骤可以包括：

运行新的网页界面的JavaScript代码，根据所述网页样式文件，将所述超文本标记语言结构字符串的主体代码转换为图片。

JavaScript代码是预先进行设定的，当所述网页样式文件和所述网页样式文件所述超文本标记语言结构字符串置入对象中时，会自动运行JavaScript代码将超文本标记语言结构字符串的主体代码转为图片。

步骤S107：打印所述图片。

在一实施例中，所述打印所述图片的步骤可以包括：

运行JavaScript代码调用webkit内核浏览器的打印组件打印所述图片。

通过调用webkit内核浏览器的打印组件可以减少***代码的复杂度。

在一实施例中，所述打印所述图片的步骤可以包括：

调用打印组件对所述图片进行打印预览，根据所述打印预览判断预览页面中的图片大小与设定的大小是否相同，若是，则通过所述打印组件打印所述图片，若否，则通过修改所述网页样式文件调节预览页面图片的大小，并在图片大小调节到相同后打印所述图片。

通过调用打印组件对所述图片进行打印预览，并对不符合设定大小的图片进行调整，可以使得打印的图片更符合需求，质量更高。

上述web网页指定区域打印方法，通过截取用户预打印网页区域的超文本标记语言代码和网页样式文件，并将其置入新开的打印预览窗口的对象(document)中，然后按照网页样式文件的格式将超文本标记语言转化为图片，最后通过调用打印组件进行打印。在截取预打印网页区域的超文本标记语言代码和网页样式文件的基础上，通过调用自带的打印组件使得需要执行的代码较简洁以及加载的软件体积较小，从而提高了打印的效率。

为了更进一步的详细解释本发明的网页指定区域打印方法，下面将结合具体应用实例进行说明。

本具体应用实例，以在chrome浏览器上的应用进行说明。

具体应用操作流程描述：

步骤S201：用户打开chrome浏览器；

步骤S203：***代码预设定打印区域，然后用户点击打印按钮，弹出一个打印预览窗口，这时原界面上的JavaScript代码将截取打印区域内的html代码以及css样式文件，并把截取出来的片段代码放到新打开的打印预览窗口上；

截取浏览器中用户预打印区域的html代码有以下几种方式(print area表示指定区域)：

在预截取的html代码的前后置入注释代码，例如<！--print areastart-->.....<！--print area end-->；也可以直接用dom(Document Object Model,文件对象模型)标签在html代码中做标记，并通过id选择器或者class选择器来进行截取，比如<div id＝”print-area”></div>；

使用JavaScript原生方法innerHtml(一种字符串，用于获取对象起始和结束标签内的html代码)或者通过jquery(一种JavaScript插件库)的html()方法获取html内容，例如document.getElementById("print-area").innerHTML和$(“#print-area”).html()。

步骤S205：等待html代码在新开的预览窗口渲染完毕后，预览窗口中的JavaScript代码会把窗口页面上的html主体代码转换为图片文件，然后调用浏览器内置打印方法，调出chrome浏览器自带的打印组件；其中，JavaScript代码可以包括html2canvas.js；

步骤S207：通过打印组件查看打印预览效果，根据预览页面与打印区域的吻合程度，可以通过反复开关预览窗口，修改css样式文件来调节预览窗口图片的大小，直到满足打印需求；

步骤S209：最后用户点击打印即可完成指定区域的网页打印。

请参阅图2，图2为一实施例web网页指定区域打印***结构示意图。

一种web网页指定区域打印***，包括：

截取模块310，用于截取web网页指定区域的超文本标记语言代码和网页样式文件，并创建网页脚本代码，将所述超文本标记语言代码合并成超文本标记语言的结构字符串；

渲染模块330，用于创建打印预览窗口，并将所述结构字符串、网页样式文件和网页脚本代码，置入所述打印预览窗口的对象中进行渲染成新的网页界面，并得到页面脚本代码；

转化模块350，用于在新的网页界面上运行所述页面脚本代码根据所述网页样式文件将所述超文本标记语言结构字符串转为图片；

打印模块370，用于打印所述图片。

上述web网页指定区域打印***，超文本标记语言代码指的是标准通用标记语言下的一个应用，网页样式文件一般指的是网页中的css样式文件。对象指的是载入浏览器的HTML文档所成为的Document对象，进行渲染的目的是为了将打印区域的图像显示出来，为后续打印成图片提供依据。

在一实施例中，所述截取模块310可以进一步用于：

在webkit内核浏览器的网页上，运行网页JavaScript代码，截取web网页指定区域的超文本标记语言代码和网页样式文件；

所述打印模块370可以进一步用于：

运行JavaScript代码调用webkit内核浏览器的打印组件打印所述图片。

Webkit内核浏览器指的是使用webkit引擎的浏览器，比如chrome浏览器；webkit内核浏览器自带的JavaScript代码比较简洁易用，通过运行网页JavaScript代码进行截取，可以提高截取超文本标记语言代码和网页样式文件的效率。通过调用webkit内核浏览器的打印组件可以提高打印图片的效率。

在一实施例中，所述转化模块350可以进一步用于：

运行新的网页界面的JavaScript代码，根据所述网页样式文件，将所述超文本标记语言结构字符串的主体代码转换为图片。

JavaScript代码是预先进行设定的，当所述网页样式文件和所述网页样式文件所述超文本标记语言结构字符串置入对象中时，JavaScript代码会自动运行将超文本标记语言结构字符串的主体代码转为图片。

在一实施例中，本实施例web网页指定区域打印***还可以包括：

置入模块，用于将自定义样式文件置入打印预览窗口的对象中，合并所述网页样式文件与自定义样式文件，形成打印样式文件；

转化模块350进一步用于在新的网页界面上运行所述页面脚本代码，根据所述打印样式文件将所述超文本标记语言结构字符串转为图片。

自定义样式文件中可以包含对颜色进行限定的样式文件等，通过合并所述网页样式文件与自定义样式文件可以按照需求调整所需要打印的区域的样式。

在一实施例中，所述打印模块370可以进一步用于：

调用打印组件对所述图片进行打印预览，根据所述打印预览判断预览页面中的图片大小与设定的大小是否相同，若是，则通过所述打印组件打印所述图片，若否，则通过修改所述网页样式文件调节预览页面图片的大小，并在图片大小调节到相同后打印所述图片。

通过调用打印组件对所述图片进行打印预览，并对不符合设定大小的图片进行调整，可以使得打印的图片更符合需求，质量更高。

上述web网页指定区域打印***，通过截取用户预打印网页区域的超文本标记语言代码和网页样式文件，并将其置入新开的打印预览窗口的对象(document)中，然后按照网页样式文件的格式将超文本标记语言转化为图片，最后通过调用打印组件进行打印。在截取预打印网页区域的超文本标记语言代码和网页样式文件的基础上，通过调用自带的打印组件使得需要执行的代码较简洁以及加载的软件体积较小，从而提高了打印的效率。

本发明的web网页指定区域打印***与本发明的web网页指定区域打印方法一一对应，在上述web网页指定区域打印方法的实施例阐述的技术特征及其有益效果均适用于web网页指定区域打印***的实施例中，特此声明。

以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (10)

1.一种web网页指定区域打印方法，其特征在于，包括以下步骤：

截取web网页指定区域的超文本标记语言代码和网页样式文件，并创建网页脚本代码，将所述超文本标记语言代码合并成超文本标记语言的结构字符串；

创建打印预览窗口，并将所述结构字符串、网页样式文件和网页脚本代码置入所述打印预览窗口的对象中进行渲染成新的网页界面，并得到页面脚本代码；

在新的网页界面上运行所述页面脚本代码，根据所述网页样式文件将所述超文本标记语言结构字符串转为图片；

打印所述图片。

2.根据权利要求1所述的web网页指定区域打印方法，其特征在于，所述截取web网页指定区域的超文本标记语言代码和网页样式文件的步骤包括：

在webkit内核浏览器的网页上，运行网页JavaScript代码，截取web网页指定区域的超文本标记语言代码和网页样式文件；

所述打印所述图片的步骤包括：

运行JavaScript代码调用webkit内核浏览器的打印组件打印所述图片。

3.根据权利要求1所述的web网页指定区域打印方法，其特征在于，所述在新的网页界面上运行所述页面脚本代码，根据所述网页样式文件将所述超文本标记语言结构字符串转为图片步骤包括：

运行新的网页界面上的JavaScript代码，根据所述网页样式文件，将所述超文本标记语言结构字符串的主体代码转换为图片。

4.根据权利要求1所述的web网页指定区域打印方法，其特征在于，所述进行渲染成新的网页界面的步骤之前还包括：

将自定义样式文件置入打印预览窗口的对象中，合并所述网页样式文件与自定义样式文件，形成打印样式文件；

在新的网页界面上运行所述页面脚本代码，根据所述打印样式文件将所述超文本标记语言结构字符串转为图片。

5.根据权利要求1所述的web网页指定区域打印方法，其特征在于，所述打印所述图片的步骤包括：

调用打印组件对所述图片进行打印预览，根据所述打印预览判断预览页面中的图片大小与设定的大小是否相同，若是，则通过所述打印组件打印所述图片，若否，则通过修改所述网页样式文件调节预览页面图片的大小，并在图片大小调节到相同后打印所述图片。

6.一种web网页指定区域打印***，其特征在于，包括：

截取模块，用于截取web网页指定区域的超文本标记语言代码和网页样式文件，并创建网页脚本代码，将所述超文本标记语言代码合并成超文本标记语言的结构字符串；

渲染模块，用于创建打印预览窗口，并将所述结构字符串、网页样式文件和网页脚本代码置入所述打印预览窗口的对象中进行渲染成新的网页界面，并得到页面脚本代码；

转化模块，用于在新的网页界面上运行所述页面脚本代码，根据所述网页样式文件将所述超文本标记语言结构字符串转为图片；

打印模块，用于打印所述图片。

7.根据权利要求6所述的web网页指定区域打印***，其特征在于，所述截取模块进一步用于：

在webkit内核浏览器的网页上，运行网页JavaScript代码，截取web网页指定区域的超文本标记语言代码和网页样式文件；

所述打印模块进一步用于：

运行JavaScript代码调用webkit内核浏览器的打印组件打印所述图片。

8.根据权利要求6所述的web网页指定区域打印***，其特征在于，所述转化模块进一步用于：

运行新的网页界面的JavaScript代码，根据所述网页样式文件，将所述超文本标记语言结构字符串的主体代码转换为图片。

9.根据权利要求6所述的web网页指定区域打印***，其特征在于，还包括：

置入模块，用于将自定义样式文件置入打印预览窗口的对象中，合并所述网页样式文件与自定义样式文件，形成打印样式文件；

转化模块进一步用于在新的网页界面上运行所述页面脚本代码，根据所述打印样式文件将所述超文本标记语言结构字符串转为图片。

10.根据权利要求6所述的web网页指定区域打印***，其特征在于，所述打印模块进一步用于：

调用打印组件对所述图片进行打印预览，根据所述打印预览判断预览页面中的图片大小与设定的大小是否相同，若是，则通过所述打印组件打印所述图片，若否，则通过修改所述网页样式文件调节预览页面图片的大小，并在图片大小调节到相同后打印所述图片。