写点什么

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

  • 2022-10-26
    陕西
  • 本文字数:2750 字

    阅读完需:约 9 分钟

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

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

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



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



项目实战


今天我们从 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# **前端展示中实现批量标签动态生成**

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

![](https://img2022.cnblogs.com/blog/139239/202210/139239-20221026135835280-956908527.png)

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

![](https://img2022.cnblogs.com/blog/139239/202210/139239-20221026135847272-1505178839.png)

**项目实战**

今天我们从 Wyn 出发,为大家展示整个功能的实现过程。

[Wyn](https://www.grapecity.com.cn/solutions/wyn/industry)作为一款专业的商业智能软件,除了可以将整个仪表板和单个图表嵌入、仪表板设计器嵌入、分析门户嵌入、OEM 安装包嵌入,同时,提供丰富的 API,以满足个性化嵌入需要,除了本文即将介绍的批量打印标签功能外,对更多行业解决方感兴趣可查看:

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

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

![](https://img2022.cnblogs.com/blog/139239/202210/139239-20221026135857894-333070666.png)

![](https://img2022.cnblogs.com/blog/139239/202210/139239-20221026135904151-1871948161.png)

**2.设计单个标签的样式以及字段绑定**

单个标签设计有多种方式,可以用文本框和条形码组件拼接:

![](https://img2022.cnblogs.com/blog/139239/202210/139239-20221026135912488-128659492.png)

也可以采用表格组件标题行嵌套文本框和数据字段;

选择表格组件,删除汇总行和明细行

![](https://img2022.cnblogs.com/blog/139239/202210/139239-20221026135920582-1324727424.png)

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

![](https://img2022.cnblogs.com/blog/139239/202210/139239-20221026135930756-1044661970.png)

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

![](https://img2022.cnblogs.com/blog/139239/202210/139239-20221026135938101-1593117219.png)

如果单个标签外层还想添加圆角边框,或者其它的样式,可以在外层嵌套容器

选择容器,然后设计圆角,以及边框粗细,颜色等等;

![](https://img2022.cnblogs.com/blog/139239/202210/139239-20221026135946612-1704377743.png)

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

![](https://img2022.cnblogs.com/blog/139239/202210/139239-20221026140150627-1563090673.png)

![](https://img2022.cnblogs.com/blog/139239/202210/139239-20221026140156338-1024837945.png)

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

**3.根据数据循环生成多个标签**

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

![](https://img2022.cnblogs.com/blog/139239/202210/139239-20221026140131344-1603745186.png)

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

![](https://img2022.cnblogs.com/blog/139239/202210/139239-20221026140220730-851335889.png)

![](https://img2022.cnblogs.com/blog/139239/202210/139239-20221026140228351-557609123.png)

**4.最后调整实现让循环生成以 Z 字型生成**

首先确定一个标签的大小,以及纸张的大小,确定一下一行可以显示几个标签;

比如我的标签宽度 9 厘米,我希望一行显示 3 个标签,那我就需要纸张的宽度至少是  9\*3+左右页边距=29cm

![](https://img2022.cnblogs.com/blog/139239/202210/139239-20221026140237070-611426275.png)

![](https://img2022.cnblogs.com/blog/139239/202210/139239-20221026140243101-875890079.png)

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

![](https://img2022.cnblogs.com/blog/139239/202210/139239-20221026140250727-206431791.png)

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

![](https://img2022.cnblogs.com/blog/139239/202210/139239-20221026140259169-61456596.png)

![](https://img2022.cnblogs.com/blog/139239/202210/139239-20221026140305827-2023899044.png)

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

![](https://img2022.cnblogs.com/blog/139239/202210/139239-20221026140314631-1902664841.png)

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

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

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

发布于: 刚刚阅读数: 3
用户头像

赋能开发者 2020-05-09 加入

西安葡萄城信息技术有限公司是全球领先的软件开发技术和 低代码 平台提供商,以“ 赋能开发者”为使命,致力于通过各类软件开发工具和服务,创新开发模式,提升开发效率,推动软件产业发展,为“数字中国”建设提速

评论

发布
暂无评论
前端展示中实现批量标签动态生成_批量_葡萄城技术团队_InfoQ写作社区