首页 > 其他分享 >前端展示中实现批量标签动态生成

前端展示中实现批量标签动态生成

时间:2022-10-26 14:11:55浏览次数:102  
标签:嵌入 报表 批量 标签 前端 单个 组件

前端展示中实现批量标签动态生成

使用过报表的小伙伴,经常会有条码打印、标签打印的需求,一两个标签还好处理,但很多时候我们可能需要的是几十、上百个内容的批量打印,如下图所示:

今天我们就来为大家介绍,如何快速实现报表的标签条码批量打印。

项目实战

今天我们从Wyn出发,为大家展示整个功能的实现过程。
Wyn作为一款专业的商业智能软件,除了可以将整个仪表板和单个图表嵌入、仪表板设计器嵌入、分析门户嵌入、OEM 安装包嵌入,同时,提供丰富的 API,以满足个性化嵌入需要,除了本文即将介绍的批量打印标签功能外,对更多行业解决方感兴趣可查看:

https://www.grapecity.com.cn/solutions/wyn/industry

1.创建RDL报表,绑定数据集

2.设计单个标签的样式以及字段绑定
单个标签设计有多种方式,可以用文本框和条形码组件拼接:

也可以采用表格组件标题行嵌套文本框和数据字段;
选择表格组件,删除汇总行和明细行

然后表格标题嵌入条形码,以及绑定数据字段

预览可以看到目前设计的单个标签样式

如果单个标签外层还想添加圆角边框,或者其它的样式,可以在外层嵌套容器
选择容器,然后设计圆角,以及边框粗细,颜色等等;

接下来把上面设计的单个表格整个嵌套到这个容器内部

到此单个标签设计全部完成

3.根据数据循环生成多个标签
要实现根据数据行数循环生成多个标签,就需要利用列表组件,根据列表组件的分组功能实现该需求

然后把上面的容器整个再放入到列表组件里面,预览即可看到根据数据循环显示多次

4.最后调整实现让循环生成以Z字型生成
首先确定一个标签的大小,以及纸张的大小,确定一下一行可以显示几个标签;
比如我的标签宽度9厘米,我希望一行显示3个标签,那我就需要纸张的宽度至少是  9*3+左右页边距=29cm

然后设置纸张高度为:标签高度+上下页边距=7cm;

然后设置报表进行分栏,分成3栏,这样一行就可以显示3个标签

注意:在设计的时候有一些尺寸高度,宽度微调,这块尽量使用属性设置的宽度高度调整固定值,不要手动拖动大小;

到这里我们就完整实现了前端报表中完整调整标签内容格式,并设置正确的打印格式顺序。

大家如果对更多前端数据分析、报表、仪表板相关内容感兴趣,欢迎访问:

https://www.grapecity.com.cn/solutions/wyn/demo

标签:嵌入,报表,批量,标签,前端,单个,组件
From: https://www.cnblogs.com/powertoolsteam/p/16828150.html

相关文章

  • AWVS批量导入
    在记事本中粘贴目标URL,每行后面需要加逗号和1,1也可以换成其他描述或空格(使用notepad++批量添加)更改之后,如下图所示注:如果是在txt文件中编辑,需要删除文件末尾最后一行,如......
  • 前端一面高频vue面试题总结
    对VueSSR的理解Vue.js是构建客户端应用程序的框架。默认情况下,可以在浏览器中输出Vue组件,进行生成DOM和操作DOM。然而,也可以将同一个组件渲染为服务端的HTML字......
  • linux 前端部署 tomcat 脚本
    前提:打包后的文件位置:/home/usr/back目的部署位置:/home/usr/prod1目的部署位置:/home/usr/prod2 在linux服务器上新增文件deploy-web.sh,并运行shdeploy-web.sh......
  • 前端后端知识体系理解--wsdchong
    时间:2020/4/21前言:对前端的理解、对后端的理解、基于Java的前后端、基于node.js、基于PHP。认识具有反复性和无限性。这是我之前2020/4/13对前后端的理解:前后端学习框架在变......
  • HTML标签_块标签与HTML标签_语义化标签
    HTML标签_块标签div:每一个div占满一整行。块级标签span:文本信息在一行展示,行内标签内联标签展示效果<!DOCTYPEhtml><htmllang="en"><head><metacharset="......
  • HTML标签_列表标签与HTML标签_链接标签
    HTML标签_列表标签列表标签:有序列表:olil无序列表:ulli......
  • HTML超链接标签和HTML块标签
    HTML超链接标签:超链接就是从一个网页跳转到另一个网页,可以使一个网页,也可以是一张图片也可以是一个文件、一段文本。在HTML里超链接的标签是a,里面的属性是href是指向一......
  • 前端性能优化——Performance的使用攻略
    博客地址:https://blog.51cto.com/u_15091652/2603170Performance是Chrome浏览器自带的性能监测工具。根据我的使用,简单理解就是我们可以通过它录制一段时间的浏览器活动,通......
  • leaflet + vue 海量点位批量显示,根据不同缩放级别显示不同数量的点位
       最近在项目中遇到一个需求,以前点位是根据区县进行分组聚合式显示的,但是交互不够友好直接,需要不断地点开才行,因此产品要求把所有点位平铺显示,不要分组,根据不同的缩......
  • 前端-中间件
    知乎上面看到的一个关于中间件解释更加形象的说法。Gocy的个人理解:将具体业务和底层逻辑解耦的组件。大致的效果是:需要利用服务的人(前端写业务的),不需要知道底层逻辑(提供......