CN116719493A - 基于web浏览器的前端打印方法及装置 - Google Patents
基于web浏览器的前端打印方法及装置 Download PDFInfo
- Publication number
- CN116719493A CN116719493A CN202310963655.8A CN202310963655A CN116719493A CN 116719493 A CN116719493 A CN 116719493A CN 202310963655 A CN202310963655 A CN 202310963655A CN 116719493 A CN116719493 A CN 116719493A
- Authority
- CN
- China
- Prior art keywords
- printing
- template
- user
- page
- 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.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 41
- 238000009877 rendering Methods 0.000 claims abstract description 13
- 238000012800 visualization Methods 0.000 claims abstract description 5
- 230000006870 function Effects 0.000 claims description 25
- 238000011161 development Methods 0.000 claims description 10
- 238000012986 modification Methods 0.000 claims description 10
- 230000004048 modification Effects 0.000 claims description 10
- 238000004590 computer program Methods 0.000 claims description 7
- 230000004044 response Effects 0.000 claims description 5
- 238000012790 confirmation Methods 0.000 claims description 3
- 238000012217 deletion Methods 0.000 claims description 3
- 230000037430 deletion Effects 0.000 claims description 3
- XVOCEQLNJQGCQG-UNAVROQCSA-N (2s)-2-[[(2s)-2-[[(2s)-1-[(2s)-6-amino-2-[[(2s)-1-[(2s)-2-amino-5-(diaminomethylideneamino)pentanoyl]pyrrolidine-2-carbonyl]amino]hexanoyl]pyrrolidine-2-carbonyl]amino]-3-phenylpropanoyl]amino]-n-[(2s)-1-[[(2s)-1-[[(2s)-1-[[(2s)-1-[[(2s)-1-amino-4-methyl- Chemical compound C([C@@H](C(=O)N[C@@H](CC=1C2=CC=CC=C2NC=1)C(=O)N[C@@H](CC(C)C)C(=O)N[C@@H](CC(C)C)C(N)=O)NC(=O)[C@H](CC=1C2=CC=CC=C2NC=1)NC(=O)[C@H](CCC(N)=O)NC(=O)[C@H](CC=1C=CC=CC=1)NC(=O)[C@H]1N(CCC1)C(=O)[C@H](CCCCN)NC(=O)[C@H]1N(CCC1)C(=O)[C@@H](N)CCCN=C(N)N)C1=CC=CC=C1 XVOCEQLNJQGCQG-UNAVROQCSA-N 0.000 claims description 2
- 238000013461 design Methods 0.000 description 7
- 238000010586 diagram Methods 0.000 description 3
- 238000005516 engineering process Methods 0.000 description 3
- 238000009434 installation Methods 0.000 description 3
- OKTJSMMVPCPJKN-UHFFFAOYSA-N Carbon Chemical compound [C] OKTJSMMVPCPJKN-UHFFFAOYSA-N 0.000 description 2
- 101001072091 Homo sapiens ProSAAS Proteins 0.000 description 2
- 102100036366 ProSAAS Human genes 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 2
- 230000005540 biological transmission Effects 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 238000012545 processing Methods 0.000 description 2
- 230000003068 static effect Effects 0.000 description 2
- 230000000007 visual effect Effects 0.000 description 2
- VYZAMTAEIAYCRO-UHFFFAOYSA-N Chromium Chemical compound [Cr] VYZAMTAEIAYCRO-UHFFFAOYSA-N 0.000 description 1
- 230000002155 anti-virotic effect Effects 0.000 description 1
- 238000013459 approach Methods 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 230000003631 expected effect Effects 0.000 description 1
- 229910021389 graphene Inorganic materials 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 230000009191 jumping Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000008569 process Effects 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 238000012546 transfer Methods 0.000 description 1
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/1278—Dedicated interfaces to print systems specifically adapted to adopt a particular infrastructure
- G06F3/1285—Remote printer device, e.g. being remote from client or server
-
- 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/1223—Dedicated interfaces to print systems specifically adapted to use a particular technique
- G06F3/1237—Print job management
- G06F3/1253—Configuration of print job parameters, e.g. using UI at the client
- G06F3/1257—Configuration of print job parameters, e.g. using UI at the client by using pre-stored settings, e.g. job templates, presets, print styles
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
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)
- Accessory Devices And Overall Control Thereof (AREA)
Abstract
本发明提出一种基于WEB浏览器的前端打印方法及装置，该方法包括：在WEB浏览器端设置自定义媒体查询，将printcss文件设置为仅在打印模式下应用于页面，并指定能够被设置的参数项；基于所述print css文件自定义至少一个打印模板；当用户打印时，选取至少一个构建好的所述打印模板，通过所述WEB浏览器的打印控件渲染所述打印模板，以实现所述打印模板的可视化；获取用户提交的数据源，通过所述打印控件将所述数据源加载至所述打印模板中，再将所述打印模板进行渲染，生成预览页面；调用浏览器的打印功能，对所述预览页面进行本地打印。本发明不需要安装任何第三方插件、兼容性好、支持自定义打印模板。
Description
技术领域
本发明涉及WEB前端技术领域，具体涉及一种基于WEB浏览器的前端打印方法及装置。
背景技术
随着SAAS平台的发展，越来越多的WEB系统甚至是移动端都需要用到打印功能。传统的打印系统主要采用C/S结构，需要安装浏览器插件并安装exe打印程序，然后调用本地的exe文件进行打印。但是，浏览器插件和打印程序安装容易出错，且这种方案兼容性差，仅支持部分浏览器。
发明内容
发明目的：本发明旨在克服以上技术问题，提出一种具有较好的兼容性、稳定性、跨平台性的基于WEB浏览器的前端打印方法及装置。
发明内容：为实现上述目的，本发明提出以下技术方案：
根据第一方面，提供了一种基于WEB浏览器的前端打印方法，包括：
（1）在WEB浏览器端设置自定义媒体查询，将print css文件设置为仅在打印模式下应用于页面，并指定能够被设置的参数项；
（2）基于所述print css文件自定义至少一个打印模板，包括：
基于用户对所述打印模板的参数设置，通过所述打印模板定义打印页面的属性参数，以确定所述打印页面的样式；
基于用户对所述打印模板中的打印元素的自定义配置，确定所述打印页面中打印内容的布局格式；
（3）当用户打印时，选取一个构建好的所述打印模板，通过所述WEB浏览器的打印控件渲染所述打印模板，以实现所述打印模板的可视化；
（4）获取用户提交的数据源，通过所述打印控件将所述数据源加载至所述打印模板中，再将所述打印模板进行渲染，生成预览页面；
（5）调用浏览器的打印功能，对所述预览页面进行本地打印。
作为第一方面所述方法的一种可选实施方式，该方法还包括：
通过前端组件化开发框架为所述打印模板提供内容自定义功能，包括：为用户提供预先构建好的模板元素及提供自定义模板元素的功能。
具体的，所述前端组件化开发框架包括：React框架、AntD框架、Dragable.js框架。
作为第一方面所述方法的一种可选实施方式，所述基于用户对所述打印模板中的打印元素的自定义配置，确定所述打印页面中打印内容的布局格式，具体包括：
响应于用户将预先构建的所述打印元素拖拽到所述打印模板中的内容设置区域，确定所述打印页面中打印内容的布局格式。
作为第一方面所述方法的一种可选实施方式，在通过所述WEB浏览器的打印控件渲染所述打印模板后，还包括：
基于用户对所述打印模板的参数调整，实现对所述打印模板的微调。
根据第二方面，提供了一种基于WEB浏览器的前端打印装置，包括用户终端和后台服务器；
用户终端安装有浏览器，所述浏览器基于预先部署的print css文件为用户提供业务单据页面；用户通过所述业务单据页面自定义至少一个打印模板；所述自定义至少一个打印模板包括：基于用户对所述打印模板的参数设置，通过所述打印模板定义打印页面的属性参数，以确定所述打印页面的样式；基于用户对所述打印模板中的打印元素的自定义配置，确定所述打印页面中打印内容的布局格式；
所述后台服务器用于响应于用户的打印模板列表请求，向用户提供已发布的打印模板列表；以及基于用户确定的打印模板编号和用户提供的数据源，选取相应的打印模板，
通过打印控件将所述数据源加载至所述打印模板中，再将所述打印模板进行渲染，生成预览页面；
所述浏览器用于响应于用户对所述预览页面的确认，调用打印功能，对所述预览页面进行本地打印。
作为第二方面所述装置的一种可选实施方式，所述业务单据页面还用于为用户提供模板修改功能，所述模板修改功能包括：打印元素删除、打印元素修改和打印元素新增。
作为第二方面所述装置的一种可选实施方式，所述业务单据页面具体用于响应于用户将预先构建的所述打印元素拖拽到所述打印模板中的内容设置区域，确定所述打印页面中打印内容的布局格式。
根据第三方面，提供了一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现所述基于WEB浏览器的前端打印方法。
根据第四方面，提供了一种电子设备，包括：
一个或多个处理器；以及与所述一个或多个处理器关联的存储器，所述存储器用于存储程序指令，所述程序指令在被所述一个或多个处理器读取执行时，执行所述基于WEB浏览器的前端打印方法的具体步骤。
有益效果：与现有技术相比，本发明具有以下优势：
1、不需要安装任何第三方插件，只需要浏览器即可。
2、兼容性好，采用标准的html+js+css，支持windows、macos、linux系统下的所有浏览器。
3、用户学习成本低，操作简单。
4、用户能充分利用网页的设计能力，配合动态数据源，自定义模板的样式和内容布局格式，还可以控制局部打印内容。
5、不需要服务器打印，充分利用了计算机本地的空闲资源，减轻了服务器压力。
附图说明
为了更清楚地说明本说明书实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本说明书的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为本说明书一个或多个实施例提供的一种基于WEB浏览器的前端打印方法的流程示意图；
图2为本说明书一个或多个实施例中提供的电子设备的结构图。
实施方式
随着SAAS平台的发展，越来越多的WEB系统甚至是移动端都需要用到打印功能，兼容性、稳定性、跨平台性一直缠绕着大家，通常在WEB系统里面打印需要浏览器安装ActiveX组件（ActiveX安装不容易成功），然后调用本地的exe文件进行打印；非windows系统的浏览器还无法使用。
目前市面上主流的打印插件有：lodop、c-lodop、锐浪等。
锐浪需要安装浏览器插件activeX来检测并呼起本地exe文件，针对跨平台要求，他们提供的方案为：提供服务器端打印，即启几台windows服务器，安装对应的dll文件，通过浏览器调用后台接口来触发dll文件的打印，这种方式首先增加了服务器成本，其次windows服务非常不稳定，比较影响用户体验。
Lodop打印控件是浏览器插件，与浏览器紧密结合来实现本地打印;C-Lodop是云打印服务,和锐浪的服务器端打印如出一辙。
从现有的WEB打印方案来看，主要存在以下缺陷：
1、用户使用要求高，需要安装插件、应用程序，偶尔会安装失败或者被杀毒软件误删。
2、兼容性差，仅支持特定的浏览器，特定的操作系统，目前锐浪在windows下不支持chrome，仅支持部分套壳浏览器。
3、学习成本高，需要学习如何配置模版。
4、服务器打印模式增加运营成本，windows服务不稳定。
5、第三方打印软件存在一定的费用，不支持自定义。
6、传统的web打印通常利用window.print()和document.exceCommand()来实现，但是这种方法只能打印整个区域，不能实现局部打印。为了实现局部打印，有些开发者采用iframe 控制打印区域的方法或者通过 canvas 将页面转换成图片进行打印。不过，这种方法存在一些问题，例如打印出来的内容非常模糊，尤其是在碰到针式打印机时，打印结果几乎无法辨认。
有鉴于此，本公开实施例旨在提出一种基于WEB浏览器的前端打印方法及装置，以至少部分地解决上述技术问题。
为了使本技术领域的人员更好地理解本说明书中的技术方案，下面将结合本说明书实施例中的附图，对本说明书实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本说明书一部分实施例，而不是全部的实施例。基于本说明书中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本说明书保护的范围。
需要说明的是：在其他实施例中并不一定按照本说明书示出和描述的顺序来执行相应方法的步骤。在一些其他实施例中，其方法所包括的步骤可以比本说明书所描述的更多或更少。此外，本说明书中所描述的单个步骤，在其他实施例中可能被分解为多个步骤进行描述；而本说明书中所描述的多个步骤，在其他实施例中也可能被合并为单个步骤进行描述。
本领域技术人员可以理解，在本发明实施例中使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本发明。在本发明实施例和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。
请参考图1，图1示例性的显示了本公开实施例提供的一种基于WEB浏览器的前端打印方法的流程示意图。如图1所示，该方法包括以下步骤：
S1、在WEB浏览器端设置自定义媒体查询，将print css文件设置为仅在打印模式下应用于页面，并指定能够被设置的参数项。
print css是一种实现网页打印技术，它使用在网页中应用的样式表来定义打印页面的属性。此外，我们可以使用print css（样式表）来定义打印页面的样式，包括尺寸、页边距、表格属性，甚至可以定义每一页的样式。相对于使用JS代码进行打印，print css有更好的兼容性和易用性，而且可以方便地创建丰富、高度定制化的打印文档。
在使用之前，可以通过在WEB浏览器端设置自定义媒体查询的方式来设置printcss的应用方式，例如print css文件设置为仅在打印模式下应用于页面，并指定能够被设置的参数项。
S2、基于所述print css文件自定义至少一个打印模板。
在一些可选的实施方式中，可以通过前端组件化开发框架为所述打印模板提供内容自定义功能，包括：为用户提供预先构建好的模板元素及提供自定义模板元素的功能。所述前端组件化开发框架可以采用react、antd、dragable.js等框架，从而实现对页面进行布局、拖拽设计打印模版。
在一些可选的实施方式中，可以采用以下方式来自定义打印模板，包括：
基于用户对所述打印模板的参数设置，通过所述打印模板定义打印页面的属性参数，以确定所述打印页面的样式；
基于用户对所述打印模板中的打印元素的自定义配置，确定所述打印页面中打印内容的布局格式。
在一些更具体的实施方式中，可以通过设置@media print定义当用户使用浏览器打印网页时应该应用哪些样式，以及什么样式不应该被应用。例如，可以采用以下方式设置@media print：
@media print{
/*隐藏不打印的元素*/
.no-print{
display:none;
}
}
/* 尺寸、页边距设置
* size还可使用纸质尺寸关键字”A4″或“legal”；亦可通过关键字指定页面方向“portrait”、“landscape”，默认为portrait垂直方向。当margin设置不起作用时检查打印机是否边距是否设置了默认以外的值。
*/
@page{
size: 6in 8in;
margin: 20px;
}
/* 设置第一页、奇数页或偶数页样式 */
@page :first {}
/* 避免表格断开 */
@page{
table{
page-break-after: avoid;
}
}
/* 设置双面打印的不同样式 */
@page :left {}
@page :right {}
在上述代码中，通过设置@media print，定义了打印页面的尺寸和页边距，并用CSS实现了分页、表格控制等功能，在使用window.print进行打印时会自动应用。
在一些更具体的实施方式中，用户可以通过前端组件化开发框架为打印模板提供内容自定义功能，选择前端组件化开发框架提供的业务字段/系统字段/自定义字段中的动/静打印元素，然后将打印元素拖拽至打印设计区域，并选择对应数据源，完成对打印模板的自定义操作。
在一些更具体的实施方式中，用户还可以选取已发布的打印模板，然后基于自己的需求对打印模板进行修改，包括对打印元素的删除、修改、更新，对打印模板的参数设置进行调整，以及数据源的选择，从而以实现对打印模板的自定义。
S3、当用户打印时，选取至少一个构建好的所述打印模板，通过所述WEB浏览器的打印控件渲染所述打印模板。
在用户对打印模板完成自定义设计之后，可以通过WEB浏览器的打印控件渲染所述打印模板，以实现所述打印模板的可视化，这样可以让非开发人员实现可视化操作。
S4、获取用户提交的数据源，通过所述打印控件将所述数据源加载至所述打印模板中，再将所述打印模板进行渲染，生成预览页面。
在需要进行打印的业务情境中，用户可以接入打印控件，选择对应的打印模板，传入对应的数据源。
通过生成的预览页面可以直观地查看预计效果，判断出已设置的打印模板是否符合需求，以便对打印模板的设置进行微调。
S5、调用浏览器的打印功能，对所述预览页面进行本地打印
本步骤中，通过调用浏览器的打印功能，在本地计算机端实现js打印，能够充分利用本地空闲资源，降低服务器压力。
由上述方案可知，本公开实施例采用了print css + js实现打印，可以兼容各种浏览器，实现模版可自定义的js打印，其相对于现有技术，至少具有以下有益效果：
1、兼容性好：利用print css实现js打印具有高兼容性，能够在各种浏览器环境下运行和展示打印版页面。
2、自定义模板：本方案支持自定义打印模板，非开发者也能够设计自己所需的打印模板，提高了企业的效率和自定义化能力。
3、空间资源利用率高：在本地计算机端实现js打印，能够充分利用本地空闲资源，降低服务器压力。
4、可视化设计：本方案通过可视化页面进行布局和拖拽设计打印模板，使得业务人员能够轻松设计自己所需的打印模板，满足各类不同业务需求。
5、高度自定义化：本方案支持丰富的数据源，并且能够与页面拖拽操作相结合，从而实现高度自定义化的打印操作。
6、提高用户体验：本方案不需要安装第三方插件或客户端，浏览器兼容性高，跨平台性强，从而提高了打印文档的可定制化和用户体验，并且免去用户依赖操作系统的烦恼。
7、更加一致的打印版面和控制格式和外观的能力：相对于传统的打印方式，本方案实现了更加一致的打印版面和更好的控制打印版面格式和外观的能力，以及提高了打印版面的清晰度和易读性，加强了用户满意度和企业市场竞争力。
综上所述：本公开实施例解决了传统打印功能的痛点，具有自研成本低、易使用、自定义设计、提高用户体验等优势，能够提高打印文档的可定制性和用户体验，同时保持兼容性和高度自定义化的优势，是一种高效、便捷和稳定的打印技术方案。
与图1所述方法相对应的，本公开实施例还提供了一种基于WEB浏览器的前端打印装置，包括用户终端和后台服务器；
用户终端安装有浏览器，所述浏览器基于预先部署的print css文件为用户提供业务单据页面；用户通过所述业务单据页面自定义至少一个打印模板；所述自定义至少一个打印模板包括：基于用户对所述打印模板的参数设置，通过所述打印模板定义打印页面的属性参数，以确定所述打印页面的样式；基于用户对所述打印模板中的打印元素的自定义配置，确定所述打印页面中打印内容的布局格式；
所述后台服务器用于响应于用户的打印模板列表请求，向用户提供已发布的打印模板列表；以及基于用户确定的打印模板编号和用户提供的数据源，选取相应的打印模板，
通过打印控件将所述数据源加载至所述打印模板中，再将所述打印模板进行渲染，生成预览页面；
所述浏览器用于响应于用户对所述预览页面的确认，调用打印功能，对所述预览页面进行本地打印。
在一些实施方式中，所述业务单据页面还用于为用户提供模板修改功能，所述模板修改功能包括：打印元素删除、打印元素修改和打印元素新增。
在一些实施方式中，所述业务单据页面具体用于响应于用户将预先构建的所述打印元素拖拽到所述打印模板中的内容设置区域，确定所述打印页面中打印内容的布局格式。
上述基于WEB浏览器的前端打印装置在模板选择场景下的工作流程为：
1）用户进入业务单据页面
2）用户通过业务单据页面向后台服务器请求打印模板列表；
3）后台服务器向业务单据页面返回打印模板列表；
4）业务单据页面绘制打印下拉菜单空间并部署至浏览器的前端页面；
5）前端页面向用户展示打印下拉菜单；
6）用户选择一个打印模板；
7）用户传递需要打印的数据或者数据接口地址；
8）前端页面将用户选择的打印模板的ID和需要打印的数据或数据接口地址传递给后台服务器；
9）后台服务器根据前端页面传递的打印模板的ID和需要打印的数据或数据接口地址，生成打印预览页面，并将打印预览页面返回给前端页面；
10）前端页面加载后台服务器返回的打印预览页面；
11）前端页面显示针对打印预览页面的支持打印功能（打印按钮）；
12）用户通过前端页面确认打印预览页面中的打印效果无误；
13）用户点击打印按钮；
14）在打印预览页面调用浏览器的打印功能；
15）打印页面内容；
16）关闭打印预览页面，返回业务单据页面。
上述基于WEB浏览器的前端打印装置在模板新建场景下的工作流程为：
17）用户在前端页面上点击模板设置按钮；
18）浏览器跳转到业务单据页面；
19）用户通过业务单据页面进行打印模板的新增、修改、删除操作，业务单据页面将用户操作数据传递给后台服务器；
20）后台服务器保存用户操作数据，并更新模板库；
21）业务单据页面自动关闭模板设置页面，跳转至前端页面并自动刷新打印下拉菜单；
22）用户在前端页面的打印下拉菜单中选取新建的模板；
23）用户传递需要打印的数据或数据接口地址给前端页面；
24）前端页面将用户选择的打印模板的ID和需要打印的数据或数据接口地址传递给后台服务器；
25）后台服务器根据前端页面传递的打印模板的ID和需要打印的数据或数据接口地址，生成打印预览页面，并将打印预览页面返回给前端页面；
26）前端页面加载后台服务器返回的打印预览页面；
27）前端页面显示针对打印预览页面的支持打印功能（打印按钮）；
28）用户通过前端页面确认打印预览页面中的打印效果无误；
29）用户点击打印按钮；
30）在打印预览页面调用浏览器的打印功能；
31）打印页面内容；
32）关闭打印预览页面，返回业务单据页面。
本领域的技术人员应该明白，上述的本发明的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，并且在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本发明不限制于任何特定的硬件和软件结合。
与上述基于WEB浏览器的前端打印方法对应的，本实施例还提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述基于WEB浏览器的前端打印方法。
在一个典型的配置中，计算机包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。
内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。
计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带、磁盘存储、量子存储器、基于石墨烯的存储介质或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。
与上述基于WEB浏览器的前端打印装置相对应的，本实施例还提供一种电子设备。请参考图2，图2是一示例性的实施例示出的一种基于WEB浏览器的前端打印装置所在电子设备的硬件结构图。
在硬件层面，该装置包括处理器和存储器，当然还可能包括其他业务所需要的硬件。本说明书一个或多个实施例可以基于软件方式来实现，比如由处理器从存储器中读取对应的计算机程序到内存中然后运行。当然，除了软件实现方式之外，本说明书一个或多个实施例并不排除其他实现方式，比如逻辑器件或者软硬件结合的方式等等，也就是说以下处理流程的执行主体并不限定于各个逻辑单元，也可以是硬件或逻辑器件。
本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
上述对本说明书特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。
需要注意的是，以上列举的仅为本发明的具体实施例，显然本发明不限于以上实施例，随之有着许多的类似变化。本领域的技术人员如果从本发明公开的内容直接导出或联想到的所有变形，均应属于本发明的保护范围。
Claims (10)
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.一种基于WEB浏览器的前端打印装置，其特征在于，包括用户终端和后台服务器；
用户终端安装有浏览器，所述浏览器基于预先部署的print css文件为用户提供业务单据页面；用户通过所述业务单据页面自定义至少一个打印模板；所述自定义至少一个打印模板包括：基于用户对所述打印模板的参数设置，通过所述打印模板定义打印页面的属性参数，以确定所述打印页面的样式；基于用户对所述打印模板中的打印元素的自定义配置，确定所述打印页面中打印内容的布局格式；
所述后台服务器用于响应于用户的打印模板列表请求，向用户提供已发布的打印模板列表；以及基于用户确定的打印模板编号和用户提供的数据源，选取相应的打印模板，
通过打印控件将所述数据源加载至所述打印模板中，再将所述打印模板进行渲染，生成预览页面；
所述浏览器用于响应于用户对所述预览页面的确认，调用打印功能，对所述预览页面进行本地打印。
7.如权利要求6所述的装置，其特征在于，所述业务单据页面还用于为用户提供模板修改功能，所述模板修改功能包括：打印元素删除、打印元素修改和打印元素新增。
8.如权利要求6所述的装置，其特征在于，所述业务单据页面具体用于响应于用户将预先构建的所述打印元素拖拽到所述打印模板中的内容设置区域，确定所述打印页面中打印内容的布局格式。
9.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至5任一项所述的方法。
10.一种电子设备，其特征在于，包括：
一个或多个处理器；以及与所述一个或多个处理器关联的存储器，所述存储器用于存储程序指令，所述程序指令在被所述一个或多个处理器读取执行时，执行如权利要求1至5中任一项所述方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310963655.8A CN116719493A (zh) | 2023-08-02 | 2023-08-02 | 基于web浏览器的前端打印方法及装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310963655.8A CN116719493A (zh) | 2023-08-02 | 2023-08-02 | 基于web浏览器的前端打印方法及装置 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN116719493A true CN116719493A (zh) | 2023-09-08 |
Family
ID=87871830
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202310963655.8A Pending CN116719493A (zh) | 2023-08-02 | 2023-08-02 | 基于web浏览器的前端打印方法及装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116719493A (zh) |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109343804A (zh) * | 2018-09-28 | 2019-02-15 | 江苏中服焦点信息科技有限公司 | 一种打印模板的方法 |
| CN110865775A (zh) * | 2019-09-26 | 2020-03-06 | 福建亿能达信息技术股份有限公司 | 一种基于web进行在线设计与预览的打印方法 |
| CN111045615A (zh) * | 2019-12-19 | 2020-04-21 | 厦门商集网络科技有限责任公司 | 一种在浏览器端自定义js模板的打印方法及系统 |
| CN113268209A (zh) * | 2021-05-14 | 2021-08-17 | 深圳市领星网络科技有限公司 | 一种创建自定义单据打印模板的方法、装置和计算机设备 |
-
2023
- 2023-08-02 CN CN202310963655.8A patent/CN116719493A/zh active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109343804A (zh) * | 2018-09-28 | 2019-02-15 | 江苏中服焦点信息科技有限公司 | 一种打印模板的方法 |
| CN110865775A (zh) * | 2019-09-26 | 2020-03-06 | 福建亿能达信息技术股份有限公司 | 一种基于web进行在线设计与预览的打印方法 |
| CN111045615A (zh) * | 2019-12-19 | 2020-04-21 | 厦门商集网络科技有限责任公司 | 一种在浏览器端自定义js模板的打印方法及系统 |
| CN113268209A (zh) * | 2021-05-14 | 2021-08-17 | 深圳市领星网络科技有限公司 | 一种创建自定义单据打印模板的方法、装置和计算机设备 |
Non-Patent Citations (3)
| Title |
|---|
| MTREASURE: "vue @media print使用js插入打印页不同尺寸打印，可自定义尺寸大小，打印机配置", Retrieved from the Internet <URL:https://huaweicloud.csdn.net/638f144bdacf622b8df8eefb.html?spm=1001.2101.3001.6650.7&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Eactivity-7-119668689-blog-123903967.235%5Ev38%5Epc_relevant_anti_t3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Eactivity-7-119668689-blog-123903967.235%5Ev38%5Epc_relevant_anti_t3&utm_relevant_index=14> * |
| 无: "CSS @media print控制浏览器web打印样式", Retrieved from the Internet <URL:https://blog.gougucms.com/home/article/detail/id/160.html> * |
| 有没有不存在的昵称啊: "利用@media print样式打印页面局部元素", Retrieved from the Internet <URL:https://blog.csdn.net/qq_44367273/article/details/123903967?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-4-123903967-blog-6224533.235^v38^pc_relevant_anti_t3&spm=1001.2101.3001.4242.3&utm_relevant_index=7> * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10726195B2 (en) | Filtered stylesheets | |
| CN110764850B (zh) | 界面显示方法、参数赋值方法、系统及设备 | |
| CN106294658B (zh) | 网页快速展示方法和装置 | |
| US7450256B2 (en) | Pre-defined print option configurations for printing in a distributed environment | |
| US8910036B1 (en) | Web based copy protection | |
| CN104731589A (zh) | 用户界面的自动生成方法及自动生成装置 | |
| US20030041102A1 (en) | Methods and systems for scaling inappropriately-sized documents in a distributed environment | |
| US8682964B1 (en) | Progressively loading network content | |
| US20150113626A1 (en) | Customized Log-In Experience | |
| US20130036196A1 (en) | Method and system for publishing template-based content | |
| US6907444B2 (en) | System and method to automatically obtain a service | |
| US10182169B2 (en) | Information processing apparatus, information processing method, and non-transitory recording medium | |
| US20080028307A1 (en) | Image forming system and image forming method | |
| JP2016110519A (ja) | 情報処理装置、制御方法およびプログラム | |
| CN110618850A (zh) | 一种ui界面加载方法、系统及相关装置 | |
| CN107766011B (zh) | 打印控制方法、装置及系统 | |
| US9275023B2 (en) | Methods for further adapting XSL to HTML document transformations and devices thereof | |
| KR102013620B1 (ko) | 웹 기반 문서의 템플릿을 변경하는 웹 기반 문서 편집 서버 및 이의 동작 방법 | |
| CN112487330A (zh) | 基于xml的ui换肤方法、系统、装置及存储介质 | |
| CN116719493A (zh) | 基于web浏览器的前端打印方法及装置 | |
| CN111367607A (zh) | 动态电子合同生成和签署系统及其实现方法 | |
| CN111078630A (zh) | 一种签章系统及方法 | |
| JP5526991B2 (ja) | 情報処理装置、情報処理方法、プログラム、情報処理システム | |
| CN113268232B (zh) | 一种页面皮肤生成方法、装置和计算机可读存储介质 | |
| US20090241019A1 (en) | System and method of forming help files |
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 |