前端展示中实现批量标签动态生成_葡萄城技术团队的技术博客_51CTO博客
source link: https://blog.51cto.com/powertoolsteam/5797885
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
前端展示中实现批量标签动态生成
精选 原创前端展示中实现批量标签动态生成
使用过报表的小伙伴，经常会有条码打印、标签打印的需求，一两个标签还好处理，但很多时候我们可能需要的是几十、上百个内容的批量打印，如下图所示：
今天我们就来为大家介绍，如何快速实现报表的标签条码批量打印。
项目实战
今天我们从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个标签
注意：在设计的时候有一些尺寸高度，宽度微调，这块尽量使用属性设置的宽度高度调整固定值，不要手动拖动大小；
到这里我们就完整实现了前端报表中完整调整标签内容格式，并设置正确的打印格式顺序。
大家如果对更多前端数据分析、报表、仪表板相关内容感兴趣，欢迎访问：
- 打赏
- 赞
- 收藏
- 评论
- 分享
- 举报
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK