基于WEB浏览器的前端打印方法及装置制造方法及图纸

本发明专利技术提出一种基于WEB浏览器的前端打印方法及装置，该方法包括：在WEB浏览器端设置自定义媒体查询，将printcss文件设置为仅在打印模式下应用于页面，并指定能够被设置的参数项；基于所述print css文件自定义至少一个打印模板；当用户打印时，选取至少一个构建好的所述打印模板，通过所述WEB浏览器的打印控件渲染所述打印模板，以实现所述打印模板的可视化；获取用户提交的数据源，通过所述打印控件将所述数据源加载至所述打印模板中，再将所述打印模板进行渲染，生成预览页面；调用浏览器的打印功能，对所述预览页面进行本地打印。本发明专利技术不需要安装任何第三方插件、兼容性好、支持自定义打印模板。持自定义打印模板。持自定义打印模板。

【技术实现步骤摘要】
基于WEB浏览器的前端打印方法及装置


[0001]本专利技术涉及WEB前端
，具体涉及一种基于WEB浏览器的前端打印方法及装置。

技术介绍

[0002]随着SAAS平台的发展，越来越多的WEB系统甚至是移动端都需要用到打印功能。传统的打印系统主要采用C/S结构，需要安装浏览器插件并安装exe打印程序，然后调用本地的exe文件进行打印。但是，浏览器插件和打印程序安装容易出错，且这种方案兼容性差，仅支持部分浏览器。

技术实现思路

[0003]专利技术目的：本专利技术旨在克服以上技术问题，提出一种具有较好的兼容性、稳定性、跨平台性的基于WEB浏览器的前端打印方法及装置。
[0004]
技术实现思路
：为实现上述目的，本专利技术提出以下技术方案：根据第一方面，提供了一种基于WEB浏览器的前端打印方法，包括：（1）在WEB浏览器端设置自定义媒体查询，将print css文件设置为仅在打印模式下应用于页面，并指定能够被设置的参数项；（2）基于所述print css文件自定义至少一个打印模板，包括：基于用户对所述打印模板的参数设置，通过所述打印模板定义打印页面的属性参数，以确定所述打印页面的样式；基于用户对所述打印模板中的打印元素的自定义配置，确定所述打印页面中打印内容的布局格式；（3）当用户打印时，选取一个构建好的所述打印模板，通过所述WEB浏览器的打印控件渲染所述打印模板，以实现所述打印模板的可视化；（4）获取用户提交的数据源，通过所述打印控件将所述数据源加载至所述打印模板中，再将所述打印模板进行渲染，生成预览页面；（5）调用浏览器的打印功能，对所述预览页面进行本地打印。
[0005]作为第一方面所述方法的一种可选实施方式，该方法还包括：通过前端组件化开发框架为所述打印模板提供内容自定义功能，包括：为用户提供预先构建好的模板元素及提供自定义模板元素的功能。
[0006]具体的，所述前端组件化开发框架包括：React框架、AntD框架、Dragable.js框架。
[0007]作为第一方面所述方法的一种可选实施方式，所述基于用户对所述打印模板中的打印元素的自定义配置，确定所述打印页面中打印内容的布局格式，具体包括：响应于用户将预先构建的所述打印元素拖拽到所述打印模板中的内容设置区域，确定所述打印页面中打印内容的布局格式。
[0008]作为第一方面所述方法的一种可选实施方式，在通过所述WEB浏览器的打印控件
渲染所述打印模板后，还包括：基于用户对所述打印模板的参数调整，实现对所述打印模板的微调。
[0009]根据第二方面，提供了一种基于WEB浏览器的前端打印装置，包括用户终端和后台服务器；用户终端安装有浏览器，所述浏览器基于预先部署的print css文件为用户提供业务单据页面；用户通过所述业务单据页面自定义至少一个打印模板；所述自定义至少一个打印模板包括：基于用户对所述打印模板的参数设置，通过所述打印模板定义打印页面的属性参数，以确定所述打印页面的样式；基于用户对所述打印模板中的打印元素的自定义配置，确定所述打印页面中打印内容的布局格式；所述后台服务器用于响应于用户的打印模板列表请求，向用户提供已发布的打印模板列表；以及基于用户确定的打印模板编号和用户提供的数据源，选取相应的打印模板，通过打印控件将所述数据源加载至所述打印模板中，再将所述打印模板进行渲染，生成预览页面；所述浏览器用于响应于用户对所述预览页面的确认，调用打印功能，对所述预览页面进行本地打印。
[0010]作为第二方面所述装置的一种可选实施方式，所述业务单据页面还用于为用户提供模板修改功能，所述模板修改功能包括：打印元素删除、打印元素修改和打印元素新增。
[0011]作为第二方面所述装置的一种可选实施方式，所述业务单据页面具体用于响应于用户将预先构建的所述打印元素拖拽到所述打印模板中的内容设置区域，确定所述打印页面中打印内容的布局格式。
[0012]根据第三方面，提供了一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现所述基于WEB浏览器的前端打印方法。
[0013]根据第四方面，提供了一种电子设备，包括：一个或多个处理器；以及与所述一个或多个处理器关联的存储器，所述存储器用于存储程序指令，所述程序指令在被所述一个或多个处理器读取执行时，执行所述基于WEB浏览器的前端打印方法的具体步骤。
[0014]有益效果：与现有技术相比，本专利技术具有以下优势：1、不需要安装任何第三方插件，只需要浏览器即可。
[0015]2、兼容性好，采用标准的html+js+css，支持windows、macos、linux系统下的所有浏览器。
[0016]3、用户学习成本低，操作简单。
[0017]4、用户能充分利用网页的设计能力，配合动态数据源，自定义模板的样式和内容布局格式，还可以控制局部打印内容。
[0018]5、不需要服务器打印，充分利用了计算机本地的空闲资源，减轻了服务器压力。
附图说明
[0019]为了更清楚地说明本说明书实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本说明书的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以
根据这些附图获得其他的附图。
[0020]图1为本说明书一个或多个实施例提供的一种基于WEB浏览器的前端打印方法的流程示意图；图2为本说明书一个或多个实施例中提供的电子设备的结构图。
实施方式
[0021]随着SAAS平台的发展，越来越多的WEB系统甚至是移动端都需要用到打印功能，兼容性、稳定性、跨平台性一直缠绕着大家，通常在WEB系统里面打印需要浏览器安装ActiveX组件（ActiveX安装不容易成功），然后调用本地的exe文件进行打印；非windows系统的浏览器还无法使用。
[0022]目前市面上主流的打印插件有：lodop、c
‑
lodop、锐浪等。
[0023]锐浪需要安装浏览器插件activeX来检测并呼起本地exe文件，针对跨平台要求，他们提供的方案为：提供服务器端打印，即启几台windows服务器，安装对应的dll文件，通过浏览器调用后台接口来触发dll文件的打印，这种方式首先增加了服务器成本，其次windows服务非常不稳定，比较影响用户体验。
[0024]Lodop打印控件是浏览器插件，与浏览器紧密结合来实现本地打印;C
‑
Lodop是云打印服务,和锐浪的服务器端打印如出一辙。
[0025]从现有的WEB打印方案来看，主要存在以下缺陷：1、用户使用要求高，需要安装插件、应用程序，偶尔会安装失败或者被杀毒软件误删。
[0026]2、兼容性差，仅支持特定的浏览器，特定的操作系统，目前锐浪在windows下不支持chrome，仅支持部分套壳浏览器。
[0027]3、学习成本高，需要学习本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于WEB浏览器的前端打印方法，其特征在于，包括：（1）在WEB浏览器端设置自定义媒体查询，将printcss 文件设置为仅在打印模式下应用于页面，并指定能够被设置的参数项；（2）基于所述print css文件自定义至少一个打印模板，包括：基于用户对所述打印模板的参数设置，通过所述打印模板定义打印页面的属性参数，以确定所述打印页面的样式；基于用户对所述打印模板中的打印元素的自定义配置，确定所述打印页面中打印内容的布局格式；（3）当用户打印时，选取至少一个构建好的所述打印模板，通过所述WEB浏览器的打印控件渲染所述打印模板，以实现所述打印模板的可视化；（4）获取用户提交的数据源，通过所述打印控件将所述数据源加载至所述打印模板中，再将所述打印模板进行渲染，生成预览页面；（5）调用浏览器的打印功能，对所述预览页面进行本地打印。2.如权利要求1所述的方法，其特征在于，还包括：通过前端组件化开发框架为所述打印模板提供内容自定义功能，包括：为用户提供预先构建好的模板元素及提供自定义模板元素的功能。3.如权利要求2所述的方法，其特征在于，所述前端组件化开发框架包括：React框架、AntD框架、Dragable.js框架。4.如权利要求1所述的方法，其特征在于，所述基于用户对所述打印模板中的打印元素的自定义配置，确定所述打印页面中打印内容的布局格式，具体包括：响应于用户将预先构建的所述打印元素拖拽到所述打印模板中的内容设置区域，确定所述打印页面中打印内容的布局格式。5.如权利要求1所述的方法，其特征在于，在通过所述WEB浏览器的打印控件渲染所述打印模板后，还包括：基于用户对所述打印模板的参数调整，实现对所述打印模板的微调。6.一...

【专利技术属性】
技术研发人员：高健健，刘国俭，王明柱，姚搏栋，周文豪，刘昭，
申请(专利权)人：南京掌控网络科技有限公司，
类型：发明
国别省市：