前端展示中实现批量标签动态生成
前端展示中实现批量标签动态生成
使用过报表的小伙伴,经常会有条码打印、标签打印的需求,一两个标签还好处理,但很多时候我们可能需要的是几十、上百个内容的批量打印,如下图所示:
今天我们就来为大家介绍,如何快速实现报表的标签条码批量打印。
项目实战
今天我们从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
前端展示中实现批量标签动态生成相关推荐
- Java中利用freemarker模板动态生成word含表格
最近公司有导出word的需求,由于word的样式有的很复杂所以记录一下Java中利用freemarker模板动态生成word含表格,以防以后忘记. 1.word表格的模板 删掉无用的数据留下基础的样式 ...
- uni中使用select标签后生成APP页面跳转空白
uni中使用select标签后生成APP页面跳转空白 最近再用webstrom时,写uni APP时发现一个问题 当生成apk后,带有select选择器标签的页面突然无法显示一片空白. 报错显示:Ca ...
- Day 189/200 前端Table 表头及列表内容动态生成
1.需求 Table表格的表头,以及列表数据根据接口返回的数据动态生成列表. 2.分析 1)动态生成表头 中间的表头使用子组件的形式,根据返回来的数据,动态拼接生成列表的表头. 将左右两边的表头拼接生 ...
- word文档中动态生成excel表格(基金公告系列讲解)
1.本博文仅为了将之前工作中动态生成XBRL文件需求中word文档动态生成excel部分进行了实现(虽然隔着时间比较久),闲暇之余的考虑,应对大批量文件生成时可采用定时任务+多线程技术+redis队列 ...
- 前端项目中碰到的疑难杂症
1.路由跳转: vue项目中的router的hash方式和history方式的区别,this.router.push方法和this.router.push方法和this.router.push方法和t ...
- h5页面生成图片分享到微信js_html2canvas 动态生成微信分享海报的优质js库
如何把网页上的内容用javascript来实现截图?今天分享的html2canvas就可以. 介绍 在微信项目中经常会遇到动态生成海报的需求,Web前端合成图片往往会使用canvas.canvas虽然 ...
- freemarker动态生成word、pdf文档(写入图片)
需求:给出固定的word模板通过后台查询出的数据动态生成word文档 结果展示:列表中的数据就是动态生成的. 一.创建.ftl模板文件,(我这里就不详细展开了,直接粘贴ftl模板的代码) <!D ...
- echarts 动态设置标题_echart动态生成标题
echart是一个商业级别的数据图标,一个纯JavaScript的图标库,下面是echart动态生成标题的实现方式 一.设置相关变量 var monthId=[]; var monthId1; var ...
- js 动态生成html(js根据后台返回数据生成html页面中的table标签)(转义字符)
js 动态生成html table标签中内容js生成 html代码 js代码 js 动态生成html 触发事件传参字符转义 table标签中内容js生成 html代码 <div><t ...
最新文章
- 算法岗面试复盘 | 阿里、百度、作业帮、华为
- VMware12.0PRo 下安装Ubuntu14.04LTS
- SVN之文件同步更新
- DW1000 TX POWER (发射功率) 解析
- 玩转oracle 11g(40):Oracle11g 不区分大小写设定
- centos7.3下apache搭建django[未成功]
- 流畅的Python 2. 数据结构 - 序列构成的数组
- java 中间件_从头到尾说一遍Java(中间件)垃圾回收
- proteus入门教程
- 用计算机制作多媒体作品小学,小学信息技术六年级上册《多媒体作品制作—古诗欣赏》教案...
- 【基于机器学习/深度学习的睡眠信号分类】主题必读论文推荐
- K8S部署DevOps
- 使用wait函数获取子进程终止状态
- 今日头条ajax技术内as ,cp,_cp_signature参数分析、破解及python爬取频道数据
- SQL SEVER登录失败,无法连接服务器或已成功与服务器建立连接,但是在登录过程中发生错误。(Win10版本,SQL 2019)
- NLP领域大语言模型汇总
- adb 进入 recovery adb 进入 bootloader
- Sony官网的售后服务怎么样?
- iOS冰与火之歌番外篇 - 在非越狱手机上进行App Hook(转载)
- 并行程序设计 MPI实现矩阵乘法(按行并行,分块并行,Cannon卡农算法)
热门文章
- [自动驾驶]高德的高精度地图
- 2020高交会第二十二届中国国际高新技术成果交易会
- 水滴IP告诉你,IP地址是如何划分的
- TIP2022/去雾:Variational Single Nighttime Image Haze RemovalWith a Gray Haze-Line Prior具有灰色雾霾线先验的变分去雾
- 你想成为一个什么样的面试官?
- JavaScript基础随笔
- Centos 7 硬盘扩容
- mysql安装快完了报错creating mysql router configuration显示不通过,图文教程
- 直连附加存储服务器,直接连接存储
- 求解形式幂级数的一阶微分方程