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

前端,展示,实现,批量,标签,动态,生成 · 浏览次数 : 6492

小编点评

**前端报表批量生成指南** **步骤 1:数据准备** * 获取报表数据 * 确定每行可以显示的标签数量 **步骤 2:标签设计** * 根据数据行数,动态生成标签数量 * 组成单行标签的 HTML 模板 * 使用 CSS 设置标签的格式,例如字体大小、颜色、边框等 **步骤 3:容器嵌套** * 将标签模板嵌套到表格组件或其他容器中 * 设置容器的宽度和高度,以及留白空间 **步骤 4:数据循环生成** * 使用列表组件将标签数据分组并嵌套到容器中 * 设置标签的排列顺序和样式 **步骤 5:打印格式设置** * 指定标签的尺寸、纸张大小和分栏数量 * 设置打印格式顺序,例如 Z 字形排列 **步骤 6:预览和最终生成** * 预览标签布局,确保设计合理 * 生成最终的标签打印文件 **其他提示** * 使用 CSS 中的 media query 调整标签的格式,根据不同的设备适应 * 可根据需求调整标签的样式,例如添加圆角或边框 * 提供用户可调整的打印参数,例如页面大小、打印格式等

正文

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

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

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

项目实战

今天我们从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

与前端展示中实现批量标签动态生成相似的内容:

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

前端展示中实现批量标签动态生成 使用过报表的小伙伴,经常会有条码打印、标签打印的需求,一两个标签还好处理,但很多时候我们可能需要的是几十、上百个内容的批量打印,如下图所示: 今天我们就来为大家介绍,如何快速实现报表的标签条码批量打印。 项目实战 今天我们从Wyn出发,为大家展示整个功能的实现过程。

如何在前端大屏展示中实现真正的自助

本文由葡萄城技术团队于博客园原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 数据可视化大屏的真正做用是什么? **数据可视化:**Data Visualization,即与视觉传达, 定义:为了清晰有效地传递信息,数据可视化使用统计图形、图表、

基于SqlSugar的开发框架循序渐进介绍(22)-- Vue3+TypeScript的前端工作流模块中实现统一的表单编辑和表单详情查看处理

在工作流页面中,除了特定的业务表单信息外,往往也需要同时展示通用申请单的相关信息,因此在页面设计的时候需要使用一些组件化的概念来实现动态的内容展示处理,本篇随笔介绍Vue3+TypeScript+ElementPus的前端工作流模块中实现统一的表单编辑和表单详情查看处理。

WPF中以MVVM方式,实现RTSP视频播放

前言视频播放在上位机开发中经常会遇到,基本上是两种常见的解决方案 1.采用厂家提供的sdk和前端控件进行展示,常见的海康/大华都提供了相关sdk及文档 2.开启相机onvif协议,捅过rtsp视频流进行播放,前端可以采用web方式,或者wpf中的视频控件进行展示。 项目需求,决定了最终采用开启相机o

Redux与前端表格施展“组合拳”,实现大屏展示应用的交互增强

本文由葡萄城技术团队于博客园原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 Redux 是 JavaScript 状态容器,提供可预测化的状态管理。它可以用在 react、angular、vue 等项目中, 但与 react 配合使用更加方便一

如何实现元素的曝光监测

我们是袋鼠云数栈 UED 团队,致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值。 本文作者:霁明 一些名词解释 曝光 页面上某一个元素、组件或模块被用户浏览了,则称这个元素、组件或模块被曝光了。 视图元素 将页面上展示的元素、组件或模块统称为视图元素

跟我一起学习和开发动态表单系统-前端用vue、elementui实现方法(3)

基于 Vue、Element UI 和 Spring Boot + MyBatis 的动态表单系统前端实现解析 在现代企业信息系统中,动态表单是一种非常常见的功能。它可以根据业务需求灵活地调整表单结构,以满足不同的数据收集和展示需求。在本文中,我们将探讨一种基于 Vue、Element UI 和 S

AI实战 | 手把手带你打造校园生活助手

在文章中,我展示了手把手的教程和小雨校园生活助手的功能。我强调了插件开发的重要性,以及数据库和变量的使用。工作流的使用也得到了详细解释,包括节假日信息整合和课程查询。最后,我分享了我的开场白生成方法,强调了前期调试的重要性。通过这篇文章,希望大家能够更深入地了解扣子助手的功能和实现方式。我将继续努力...

使用Mask R-CNN模型实现人体关键节点标注

摘要:在本案例中,我们将展示如何对基础的Mask R-CNN进行扩展,完成人体关键节点标注的任务。 本文分享自华为云社区《使用Mask R-CNN模型实现人体关键节点标注》,作者: 运气男孩。 前言 ModelArts 是面向开发者的一站式 AI 开发平台,为机器学习与深度学习提供海量数据预处理及交

vivo 场景下的 H5无障碍适配实践

本文主要介绍了在前端项目中常用的无障碍手势和无障碍属性,并且结合具体的开发案例为开发者真实展示了适配要点,提供组件适配思路。