OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

Web报表OnceVI如何制作条形码与打印二维码(Barcode/Qrcode)


分享到
分类 JS学习   关键字 分享   发布 ourjs  1490143115052
注意 转载须保留原文链接,译文链接,作者译者等信息。  

OnceVI 通过简单的控件拖拉和数据绑定即可显示条形码。基于条形码(Barcode)和二维码(Qrcode),由于其优良的特性在管理信息系统的设计中被广泛使用。目前广泛应用在企业内部管理、生产流程、物流控制系统方面。是报表系统中必不可少的功能特性。OnceVI支持直接显示条形码与二维码。只需要简单拖拉即可实现,

条形码简介

条形码或称条码(barcode)是将宽度不等的多个黑条和空白,按照一定的编码规则排列,用以表达一组信息的图形标识符。常见的条形码是由反射率相差很大的黑条(简称条)和白条(简称空)排成的平行线图案。条形码可以标出物品的生产国、制造厂家、商品名称、生产日期、图书分类号等信息,因而在商品流通、图书管理、邮政管理等许多领域都得到了广泛的应用。

不论是采取何种规则印制的条形码,都由静区、起始字符、数据字符与终止字符组成。有些条码在数据字符与终止字符之间还有校验字符。

  • 静区:顾名思义,不携带任何信息的区域,起提示作用。
  • 起始字符:第一位字符,具有特殊结构,当扫描器读取到该字符时,便开始正式读替换码了。
  • 数据字符:条形码的主要内容。
  • 校验字符:检验读取到的数据是否正确。不同编码规则可能会有不同的校验规则。
  • 终止字符:最后一位字符,一样具有特殊结构,用于告知代码扫描完毕,同时还起到只是进行校验计算的作用。

条形码可由一串数字及字母组成,在json文件中,可按如下格式编写一组条形码:

 {"barcode":"0123-4567a"}

准备

这里我们将一张航空机票报表为例,制作条形码与二维码。首先找到一张机票的SVG矢量图,传到OnceDoc,然后以 ”OnceVI Editor“ 方式打开。然后再创建一个JSON文件,在OnceDoc数据源地址填写这个JSON文件的地址。再在"Data Binding"面板中将字段与SVG文本区域绑定。这样我们就可以开始制作条码了。


条形码制作

在OnceVI中,您也可以根据实际需要,利用现有对象或创建新对象,并绑定条码或二维码数据。

点击左侧工具栏 barcode tool 图标barcode,选择模板文件空白处点击添加并伸缩至合适大小。在Data Binding中对目标对象进行编辑,选择barcode类型,并在Binding中绑定json文件中数据源。

Data Binding

为显示条形码数据内容,可在相应条形码下方添加文本框,并绑定相同的数据源。

barcode


条形码仅在水平方向上包含信息,在竖直方向上则不表达任何信息,因而条形码数据容量较小。二维码具有数据容量大,不局限于数字/字母等特点,可以存储网页信息。

二维码制作

添加二维码对象方式与条码类似,同样选择barcode tool,并在data binding中进行设置,此时Type中须选择Qrcode(二维码)。以保存该二维码所在网页信息为例,在Binding中任意命名绑定数据源,若此处不指定数据源名称,则只生成默认二维码,存储oncedoc主页网址。点击edit data source,在Filter工具箱中改写app.filter函数如下:

app.filter = function(data) {data.qrcode = location.href }

location.href即代表当前网页地址。

code demo

预览模板可以得到如下网页,用微信或支付宝等扫描图中二维码,也可以打开该网页。 code template

本示例地址: http://cn.oncedoc.com/oncevi.player/oncevi.player.html?file=demo/svgtemplate/Barcode_Flight.svg

更多示例: http://cn.oncedoc.com/page/view/oncevi-demo

原文地址: 点此
社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. 开源项目 RethinkDB 关闭,创始人总结失败教训
  2. Github Pages疑似被封: 再也不能用Pages搭建个人博客了
  3. JavaScript条形码生成和扫码识别(Barcode scan)开源库
  4. 关于华为优化30、40老员工的争议
  5. OnceVI前后端分离的数据可视化报表工具简介
  6. 2016 年崛起的 JS 项目
  7. OnceVI报表制作入门—如何将用户的json数据可视化成名片展示
  8. 如何基于SVG矢量图制作一个可填写信息的可视化表单-OnceVI
  9. AirJD-简单好用的免费建站工具

 相关阅读 - JS学习
  1. 如何基于SVG矢量图制作一个可填写信息的可视化表单-OnceVI
  2. OnceVI报表制作入门—如何将用户的json数据可视化成名片展示
  3. OnceDB支持全文搜索和关系查询的Redis内存数据库:驱动安装及使用教程
  4. 在OnceIO(Node.JS)中用Redis储存Session
  5. OnceIO的模块拦截与注入:模板文件路由重定向与Model数据改写
  6. OnceIO模块开发:模块注册、模块路由、静态文件重定向以及如何开发与设计一个功能扩展模块
  7. 少年,不要滥用箭头函数啊:JS中lambda表达式的优缺点和使用场景
  8. NodeJS教程:基于OnceIO框架实现文件上传和验证
  9. 在Debian(Raspberry Pi)树莓派上安装NodeJS
  10. OnceIO(Node.JS)服务器端Cookie设置、添加、删除、显示及其实现原理

 关键字 - 分享
  1. 好与坏的程序员
  2. IntelliJ IDEA使用技巧(二)——添加jar包
  3. 门店怎么利用微信小程序盈利
  4. 线下门店开发微信小程序的必要性
  5. 【版本升级】MyEclipse 2017 CI 8 发布(附下载)
  6. Node也许不是构建大型服务的最佳选择—Node之父Ryan Dahl访谈录
  7. IntelliJ IDEA使用技巧(一)——常用快捷键
  8. 【使用指南】MyEclipse部署配置(多图)
  9. 条码识别控件Dynamsoft Barcode Reader更新至v5.2丨附下载
  10. 一位自由职业者的分享:程序员怎样找兼职?

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号