CN115033192A

CN115033192A - 基于网页的标签打印方法、装置、电子设备及存储介质

Info

Publication number: CN115033192A
Application number: CN202210955891.0A
Authority: CN
Inventors: 陈军; 冯建设; 朱瑜鑫
Original assignee: Shenzhen Xinrun Fulian Digital Technology Co Ltd
Current assignee: Shenzhen Xinrun Fulian Digital Technology Co Ltd
Priority date: 2022-08-10
Filing date: 2022-08-10
Publication date: 2022-09-09
Anticipated expiration: 2042-08-10
Also published as: CN115033192B

Abstract

本申请涉及一种基于网页的标签打印方法、装置、电子设备及存储介质，该方法包括：在目标网页调用预先构建的弹窗组件生成弹窗，其中，目标网页为支持跨平台浏览的网页，弹窗组件中预先设置有待打印的标签打印纸相关的参数信息，参数信息包括标签打印纸的尺寸、边距和标签间隙；在弹窗中获取与标签打印纸相匹配的布局排版；基于参数信息和布局排版生成打印预览界面，并基于打印预览界面对标签打印纸进行打印。由于目标网页支持跨平台，因而可以跨平台实现标签打印功能；并且，可以根据该标签打印纸的实际尺寸、边距和标签间隙，生成打印预览界面并打印，从而保证了打印内容能够与标签打印纸完美适配，提高了打印效果。

Description

基于网页的标签打印方法、装置、电子设备及存储介质

技术领域

本申请涉及打印技术领域，尤其涉及一种基于网页的标签打印方法、装置、电子设备及存储介质。

背景技术

目前，现有的标签打印方式通常是使用第三方桌面软件进行标签打印，采用这种方式，无法满足具有深度排版需求的标签打印场景，且在对尺寸要求严格的标签打印纸进行标签打印时，一旦打印标签较多，容易出现打印内容偏离、标签无法使用的情况。另外，第三方桌面软件虽然在打印时不需要用户额外安装插件，但是存在无法跨平台、兼容性较差等缺点，比如存在苹果电脑（Macintosh，简称为MAC）可能无法安装和使用第三方桌面软件的情况。因而，如何实现与不同尺寸的标签打印纸灵活适配，且支持跨平台打印，成为亟待解决的技术问题。

发明内容

本申请提供了一种基于网页的标签打印方法、装置、电子设备及存储介质，以解决现有的标签打印方式无法满足具有深度排版需求的标签打印场景，且无法跨平台、兼容性较差的问题。

第一方面，本申请提供了一种基于网页的标签打印方法，所述方法包括：

在目标网页调用预先构建的弹窗组件生成弹窗，其中，所述目标网页为支持跨平台浏览的网页，所述弹窗组件中预先设置有待打印的标签打印纸相关的参数信息，所述参数信息包括所述标签打印纸的尺寸、边距和标签间隙；

在所述弹窗中获取与所述标签打印纸相匹配的布局排版；

基于所述参数信息和所述布局排版生成打印预览界面，并基于所述打印预览界面对所述标签打印纸进行打印。

可选地，所述基于所述参数信息和所述布局排版生成打印预览界面，包括：

基于所述参数信息和所述布局排版，确定每个标签对应的尺寸和位置；

根据每个标签对应的尺寸和位置，生成所述打印预览界面。

可选地，在所述根据每个标签对应的尺寸和位置，生成所述打印预览界面之前，所述方法还包括：

在所述弹窗中获取每个标签对应的标签模板，所述标签模板用于表征标签打印内容和样式；

所述根据每个标签对应的尺寸和位置，生成所述打印预览界面，包括：

将所述标签模板根据各标签对应的尺寸和位置进行渲染，生成所述打印预览界面。

可选地，所述弹窗中预设有多种所述标签模板和多种所述布局排版，不同的所述标签模板对应的标签内容不同，不同的所述布局排版所包含的标签的行数和列数不同。

可选地，所述基于所述打印预览界面对所述标签打印纸进行打印，包括：

在检测到用户基于所述打印预览界面执行打印操作的情况下，调用所述弹窗所提供的原生接口能力对所述标签打印纸进行打印。

可选地，在所述基于所述打印预览界面对所述标签打印纸进行打印之后，所述方法还包括：

监听预设事件对所述弹窗进行刷新，并在监听到所述预设事件的情况下，将所述弹窗返回至所述目标网页。

可选地，所述标签打印纸的尺寸为国际通用标准中任意一种规格的尺寸，所述标签打印纸的边距和标签间隙为预先测量得到。

第二方面，本申请还提供了一种基于网页的标签打印装置，所述装置包括：

调用模块，用于在目标网页调用预先构建的弹窗组件生成弹窗，其中，所述目标网页为支持跨平台浏览的网页，所述弹窗组件中预先设置有待打印的标签打印纸相关的参数信息，所述参数信息包括所述标签打印纸的尺寸、边距和标签间隙；

第一获取模块，用于在所述弹窗中获取与所述标签打印纸相匹配的布局排版；

打印模块，用于基于所述参数信息和所述布局排版生成打印预览界面，并基于所述打印预览界面对所述标签打印纸进行打印。

第三方面，本申请还提供了一种电子设备，包括处理器、通信接口、存储器和通信总线，其中，处理器，通信接口，存储器通过通信总线完成相互间的通信；

存储器，用于存放计算机程序；

处理器，用于执行存储器上所存放的程序时，实现第一方面任一项实施例所述的基于网页的标签打印方法的步骤。

第四方面，本申请还提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如第一方面任一项实施例所述的基于网页的标签打印方法的步骤。

在本申请实施例中，通过在目标网页调用预先构建的弹窗组件生成弹窗，其中，所述目标网页为支持跨平台浏览的网页，所述弹窗组件中预先设置有待打印的标签打印纸相关的参数信息，所述参数信息包括所述标签打印纸的尺寸、边距和标签间隙；在所述弹窗中获取与所述标签打印纸相匹配的布局排版；基于所述参数信息和所述布局排版生成打印预览界面，并基于所述打印预览界面对所述标签打印纸进行打印。通过这种方式，由于目标网页支持跨平台，因而可以跨平台实现标签打印功能；并且，在不同的业务需求下，可以根据标签打印纸的布局排版需求选择出与其匹配的布局排版，并根据该标签打印纸的实际尺寸、边距和标签间隙，生成打印预览界面并打印，从而保证了打印内容能够与标签打印纸完美适配，提高了打印效果。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本发明的实施例，并与说明书一起用于解释本发明的原理。

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，对于本领域普通技术人员而言，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为本申请实施例提供的一种基于网页的标签打印方法的流程示意图；

图2为本申请实施例提供的常见的A4标签打印纸上标签的布局排版示意图；

图3为本申请实施例提供的一种标签模板的示意图；

图4为本申请实施例提供的又一种标签模板的示意图；

图5为本申请实施例提供的又一种基于网页的标签打印方法的流程示意图

图6为本申请实施例提供的一种基于网页的标签打印装置的结构示意图；

图7为本申请实施例提供的一种电子设备的结构示意图。

具体实施方式

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

参见图1，图1为本申请实施例提供的一种基于网页的标签打印方法的流程示意图。如图1所示，该基于网页的标签打印方法可以包括如下步骤：

步骤101、在目标网页调用预先构建的弹窗组件生成弹窗，其中，目标网页为支持跨平台浏览的网页，弹窗组件中预先设置有待打印的标签打印纸相关的参数信息，参数信息包括标签打印纸的尺寸、边距和标签间隙。

具体地，上述目标网页可以为基于web端浏览器开发的任意网页，该目标网页可支持跨平台浏览，如支持在电脑、智能手机、平板等终端设备上进行浏览。在一可选实施例中，该目标网页可以为需要进行标签打印的业务网页。上述弹窗组件是指通过超文本标记语言（HyperText Markup Language简称为HTML）、层叠样式表（Cascading Style Sheets，简称为CSS）和网页脚本语言（javascript，简称为js）编译的代码，可用于为用户提供弹窗。在一实施例中，该弹窗组件可以封装成showPrintDialog()方法以供web端网页调用，当web端中的某些网页需要调用该弹窗组件时，可以直接调用该方法来实现。该弹窗组件的作用是生成弹窗，使得标签打印可以脱离web端自身网页的布局限制，让用户通过弹窗更好的预览到打印效果。该弹窗的尺寸可以比打印识别区域的尺寸略微大点，以做到布局美观。该弹窗组件中预先设置有待打印的标签打印纸相关的参数信息，参数信息可以包括但不限于标签打印纸的尺寸、边距和标签间隙等。开发人员在构建弹窗组件时，可以设置该弹窗的宽和高，例如，假设该标签打印纸为A4纸，则可以设置width: 210mm;height: 297mm，此处的210cm*297cm尺寸是标准的A4纸尺寸。然后根据不同业务需求，可以通过@media print{}中的@page{}来描述是否需要页眉页脚、横向纵向等设置，并且可以将手工测量得的标签打印纸的边距、标签间隙等进行设置，例如，假设某一标签打印纸的标签间隙为实际打印宽度的2%，则可以通过{margin-left: 2%}进行设置；假设某一标签打印纸的上下边距为该标签打印纸总高度的2.8%，左右边距为标签打印纸总宽度的4.7%，则可以通过@page{margin:2.8%4.7% }来设置上下边距和左右边距。

步骤102、在弹窗中获取与标签打印纸相匹配的布局排版。

具体地，上述布局排版是指标签在一张标签打印纸上排版的行数和列数，例如，如图2所示，图2为常见的A4标签打印纸（即A4不干胶）上标签的布局排版。一般行数为m，列数为n，m、n均为大于或等于1的整数，如m为2，n为3；m为3，n为5等等。由于A4标签打印纸上标签的行数、列数、边距和间隙不同，标签的规格也不相同。

在该步骤中，在弹窗中预先设置有图2中的部分或全部布局排版，用户可以根据实际标签打印纸的布局排版需求在弹窗上选择与标签打印纸相匹配的布局排版。当用户选择之后，可以获取到用户选择的布局排版。当需要更换其他布局排版的标签打印纸时，用户能够及时调整弹窗上的布局排版，以与实际标签打印纸的布局排版进行适配。

步骤103、基于参数信息和布局排版生成打印预览界面，并基于打印预览界面对标签打印纸进行打印。

在获取到标签打印纸相关的参数信息和布局排版后，可以根据标签打印纸相关的参数信息和布局排版生成打印预览界面，该打印预览界面可以预览到每个标签在打印界面的位置、尺寸、边距和间距等情况，从而方便用户查看打印效果。用户可以基于打印预览界面触发打印操作，对标签打印纸进行打印。

在本实施例中，由于目标网页支持跨平台，因而可以跨平台实现标签打印功能；并且，在不同的业务需求下，可以根据标签打印纸的布局排版需求选择出与其匹配的布局排版，并根据该标签打印纸的实际尺寸、边距和标签间隙，生成打印预览界面并打印，从而保证了打印内容能够与标签打印纸完美适配，提高了打印效果。

进一步地，上述步骤103、基于参数信息和布局排版生成打印预览界面，包括：

基于参数信息和布局排版，确定每个标签对应的尺寸和位置；

根据每个标签对应的尺寸和位置，生成打印预览界面。

在一实施例中，在获取到标签打印纸相关的参数信息和布局排版后，可以根据标签打印纸相关的参数信息和布局排版，确定出标签的数量和每个标签对应的尺寸和位置，进而根据每个标签对应的尺寸和位置，生成打印预览界面，该打印预览界面可以预览到每个标签在打印界面的位置、尺寸、边距和间距等情况，从而方便用户查看打印效果。

进一步地，在上述步骤103、根据每个标签对应的尺寸和位置，生成打印预览界面之前，该方法还包括：

在弹窗中获取每个标签对应的标签模板，标签模板用于表征标签打印内容和样式；

上述步骤103、根据每个标签对应的尺寸和位置，生成打印预览界面，包括：

将标签模板根据各标签对应的尺寸和位置进行渲染，生成打印预览界面。

在一实施例中，在弹窗中预先设置有多种标签模板，用户可以根据实际业务需要选择对应的标签模板。此处的标签模板可以包括但不限于文字、表格、条形码、二维码、图片等打印内容，还包括上述打印内容的样式信息。如图3和图4所示，图3和图4为示例性的标签模板示意图。在确定标签模板之后，可以将标签模板根据各标签对应的尺寸和位置进行渲染，生成打印预览界面。这样，可以在打印预览界面看到打印效果。

进一步地，弹窗中预设有多种标签模板和多种布局排版，不同的标签模板对应的标签内容不同，不同的布局排版所包含的标签的行数和列数不同。

在一实施例中，弹窗中预设有多种标签模板和布局排版，不同的标签模板对应的标签内容不同，可以根据实际业务需要，为每个标签选择合适的打印内容和样式；不同的布局排版所包含的标签的行数和列数不同，可以根据实际打印标签纸的布局排版选择与之匹配的布局排版。每个标签内部的布局可结合固定布局以及flex布局来完成，每个标签之间的排布要和标签打印贴纸对齐。在一可选实施例中，可以预制多种常用的标签模板，用户可以通过下拉菜单选择不同的标签模板编号，然后点击打印预览的时候就会在弹窗中展示不同的打印标签，弹窗组件的方法会识别当前用户选择不同的标签模板标号，对应渲染不同的标签模板样式。这样，可以满足不同业务场景对不同打印内容需求和不同标签打印纸对不同布局排版需求，实现灵活打印。

进一步地，上述步骤103、基于打印预览界面对标签打印纸进行打印，包括：

在检测到用户基于打印预览界面执行打印操作的情况下，调用弹窗所提供的原生接口能力对标签打印纸进行打印。

在一实施例中，可以调用弹窗所提供的原生接口能力即window.print（）方法，来调用打印功能进行打印。该window.print()方法打印的识别区域是整个网页的body标签下的内容，因而需要布局好元素，使其能够精准适配到实际标签打印纸。标签打印的布局，不同于常规的css布局，一般都是由UI设计师给到px像素尺寸单位，但是标签打印必须按照标签打印纸的毫米尺寸来布局，才能精确适配到实际标签打印纸张中。而控制打印时的样式也需要通过@media print {/** 设置打印的A4纸样式 */}来协同控制，设置好后，配合实际打印内容，一起动态插入网页的body标签下，调用window.print()方法即可打印预览界面。

进一步地，在上述步骤103、基于打印预览界面对标签打印纸进行打印之后，该方法还包括：

监听预设事件对弹窗进行刷新，并在监听到预设事件的情况下，将弹窗返回至目标网页。

在一实施例中，在调用弹窗所提供的原生接口能力对标签打印纸进行打印之后，还可以监听预设事件如beforeprint和afterprint事件等，对弹窗进行刷新，并在监听到预设事件的情况下，将弹窗返回至目标网页。

进一步地，标签打印纸的尺寸为国际通用标准中任意一种规格的尺寸，标签打印纸的边距和标签间隙为预先测量得到。具体地，标签打印纸的尺寸可以为A0、A1、A2、A3、A4、A5等任意一种规格的尺寸，具体根据实际需求进行选择。

在一实施例中，该基于网页的标签打印方法流程如图5所示，该基于网页的标签打印方法可以包括如下步骤：

步骤501、在弹窗组件中预先定义好标签打印纸的规范样式；

在该步骤中，通过@media print{}中的@page{}进行定义。

步骤502、在弹窗组件中预先定义好标签打印纸相关的参数信息；

在该步骤中，通过@media print{}中的@page{}进行定义。

步骤503、调用弹窗组件生成弹窗，在弹窗中选择布局排版和标签模板；

步骤504、绘制每个标签的宽高及每个标签内的打印内容和样式，生成打印预览界面；

在该步骤中，利用calc()函数计算每个标签的宽高，并通过flex布局或者百分比布局进行实际内容布局。

步骤505、调用window.print()方法对打印预览界面进行打印，并监听beforeprint和afterprint事件实现回到原有网页中。

在本实施例中，实现核心是通过web端的技术，跨平台，不卡顿，并且由于是原生技术，没有引入第三方库，所以该网页系统性能好，轻量化；并且，跨平台的网页系统将不再拘束于电脑本身的操作系统，后续迭代升级将大大优于桌面软件；另外，通过不同标签打印纸的尺寸要求可作出不同的排版，灵活性高。

参见图6，图6为本申请实施例提供的一种基于网页的标签打印装置的结构示意图。如图6所示，该基于网页的标签打印装置600包括：

调用模块601，用于在目标网页调用预先构建的弹窗组件生成弹窗，其中，目标网页为支持跨平台浏览的网页，弹窗组件中预先设置有待打印的标签打印纸相关的参数信息，参数信息包括标签打印纸的尺寸、边距和标签间隙；

第一获取模块602，用于在弹窗中获取与标签打印纸相匹配的布局排版；

打印模块603，用于基于参数信息和布局排版生成打印预览界面，并基于打印预览界面对标签打印纸进行打印。

进一步地，打印模块603包括：

确定子模块，用于基于参数信息和布局排版，确定每个标签对应的尺寸和位置；

生成子模块，用于根据每个标签对应的尺寸和位置，生成打印预览界面。

进一步地，该装置600还包括：

第二获取模块，用于在弹窗中获取每个标签对应的标签模板，标签模板用于表征标签打印内容和样式；

生成子模块，还用于将标签模板根据各标签对应的尺寸和位置进行渲染，生成打印预览界面。

进一步地，打印模块603还包括：

打印子模块，用于在检测到用户基于打印预览界面执行打印操作的情况下，调用弹窗所提供的原生接口能力对标签打印纸进行打印。

进一步地，该装置600还包括：

监听子模块，用于监听预设事件对弹窗进行刷新，并在监听到预设事件的情况下，将弹窗返回至目标网页。

进一步地，标签打印纸的尺寸为国际通用标准中任意一种规格的尺寸，标签打印纸的边距和标签间隙为预先测量得到。

需要说明的是，该基于网页的标签打印装置600可以实现如前述任意一个方法实施例提供的基于网页的标签打印方法的步骤，且达到相同的技术效果，在此不再一一赘述。

如图7所示，本申请实施例还提供了一种电子设备，包括处理器711、通信接口712、存储器713和通信总线714，其中，处理器711，通信接口712，存储器713通过通信总线714完成相互间的通信，

存储器713，用于存放计算机程序；

在本申请一个实施例中，处理器711，用于执行存储器713上所存放的程序时，实现前述任意一个方法实施例提供的基于网页的标签打印方法，包括：

在目标网页调用预先构建的弹窗组件生成弹窗，其中，目标网页为支持跨平台浏览的网页，弹窗组件中预先设置有待打印的标签打印纸相关的参数信息，参数信息包括标签打印纸的尺寸、边距和标签间隙；

在弹窗中获取与标签打印纸相匹配的布局排版；

基于参数信息和布局排版生成打印预览界面，并基于打印预览界面对标签打印纸进行打印。

本申请实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现如前述任意一个方法实施例提供的基于网页的标签打印方法的步骤。

需要说明的是，在本文中，诸如“第一”和“第二”等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

以上所述仅是本发明的具体实施方式，使本领域技术人员能够理解或实现本发明。对这些实施例的多种修改对本领域的技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下，在其它实施例中实现。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所申请的原理和新颖特点相一致的最宽的范围。

Claims

1.一种基于网页的标签打印方法，其特征在于，所述方法包括：

在所述弹窗中获取与所述标签打印纸相匹配的布局排版；

2.根据权利要求1所述的方法，其特征在于，所述基于所述参数信息和所述布局排版生成打印预览界面，包括：

根据每个标签对应的尺寸和位置，生成所述打印预览界面。

3.根据权利要求2所述的方法，其特征在于，在所述根据每个标签对应的尺寸和位置，生成所述打印预览界面之前，所述方法还包括：

4.根据权利要求3所述的方法，其特征在于，所述弹窗中预设有多种所述标签模板和多种所述布局排版，不同的所述标签模板对应的标签内容不同，不同的所述布局排版所包含的标签的行数和列数不同。

5.根据权利要求1所述的方法，其特征在于，所述基于所述打印预览界面对所述标签打印纸进行打印，包括：

6.根据权利要求5所述的方法，其特征在于，在所述基于所述打印预览界面对所述标签打印纸进行打印之后，所述方法还包括：

7.根据权利要求1所述的方法，其特征在于，所述标签打印纸的尺寸为国际通用标准中任意一种规格的尺寸，所述标签打印纸的边距和标签间隙为预先测量得到。

8.一种基于网页的标签打印装置，其特征在于，所述装置包括：

9.一种电子设备，其特征在于，包括处理器、通信接口、存储器和通信总线，其中，处理器，通信接口，存储器通过通信总线完成相互间的通信；

存储器，用于存放计算机程序；

处理器，用于执行存储器上所存放的程序时，实现如权利要求1-7任一项所述的基于网页的标签打印方法的步骤。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1-7任一项所述的基于网页的标签打印方法的步骤。