基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作

在很多项目里面,对条形码和二维码的生成和打印也是一种很常见的操作,在Web项目里面,我们可以利用JS生成条形码和二维码的组件有很多。本文引入两个比较广泛使用的JS组件,用来处理条形码和二维码的生成处理,并介绍如何利用CLODOP组件实现内容的打印输出。

生成条形码使用组件JsBarcode,生成二维码使用组件qrcodejs。

1、条形码的生成

条码的作用一般在一些商品标签上,方便使用条码枪快速、准确录入信息。
如下所示是一种条形码

这里条形码生成使用了JsBarcode组件进行处理,它支持很多格式的条码格式,如下所示。

它的简单代码例子如下所示。

//HTML代码
<svg id="barcode"></svg>
<!-- or -->
<canvas id="canvas"></canvas>
<!-- or -->
<img id="barcode"/>
//JS代码
JsBarcode("#barcode", "Hi!");
// or with jQuery
$("#barcode").JsBarcode("Hi!");

生成的图片格式如下所示。

JsBarcode组件支持多种选项参数的设置,如下所示的代码

JsBarcode("#barcode", "1234", {
format: "pharmacode",
lineColor: "#0aa",
width:4,
height:40,
displayValue: false
});
JsBarcode("#barcode")
.options({font: "OCR-B"}) // Will affect all barcodes
.EAN13("1234567890128", {fontSize: 18, textMargin: 0})
.blank(20) // Create space between the barcodes
.EAN5("12345", {height: 85, textPosition: "top", fontSize: 16, marginTop: 15})
.render(); 

通过该组件的案例代码介绍,我们可以了解到生成常规二维码的使用方式。
例如我们在界面上添加了以下HTML代码。

<div class="row" id="barDiv1">
<div class="col-md-4 col-sm-4 col-xs-4">
条形码(770 145 896 701):<br />
<img alt="" id="barcode1" />
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
条形码(770 145 896 702):<br />
<img alt="" id="barcode2" />
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
条形码(770 145 896 703):<br />
<img alt="" id="barcode3" />
</div>
</div>

然后通过JS代码实现二维码的生成。

//使用JsBarcode生成条形码
for (var i = 1; i < 10; i++) {
var barcodeValue = "77014589670" + i;//前缀 + 数值
JsBarcode("#barcode" + i, barcodeValue, {
format: "CODE128",
displayValue: true,
fontSize: 24,
lineColor: "#0cc"
});
}

最后我们可以看到具体的生成效果如下所示。

从这里我们可以看到,使用JS实现条形码的生成是非常方便简洁的,同事速度也是很不错的。

2、二维码的生成

二维码实现可以通过使用组件qrcodejs进行生成,二维码也可以使用组件jquery-qrcode进行生成,也相对比较简洁,不过打印二维码文档的时候,jquery-qrcode没有显示二维码图片,而组件qrcodejs则工作正常,因此推荐使用组件qrcodejs。

这个qrcodejs组件使用方式也很简单,基础使用代码如下所示。

<div id="qrcode"></div>
<script type="text/javascript">
new QRCode(document.getElementById("qrcode"), "http://jindo.dev.naver.com/collie");
</script> 

复杂一点的使用JS代码如下所示。

<div id="qrcode"></div>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
text: "http://jindo.dev.naver.com/collie",
width: 128,
height: 128,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
</script>

通过了解该组件的使用,我们可以在项目中增加一个实际的代码进行测试,如下所示。

<table border='0' width='100%'>
<tr>
<td>
设备二维码(9001):<br />
<div id="imgDevice9001"></div>
</td>
<td>
设备二维码(9002):<br />
<div id="imgDevice9002"></div>
</td>
<td>
设备二维码(9003):<br />
<div id="imgDevice9003"></div>
</td>
</tr>
<tr style="height:20px"><td colspan="3"></td></tr>
......
</table> 

具体我们可以利用JS动态生成相关的二维码。

//设备图片二维码
for (var i = 9001; i < 9010; i++) {
var url = "http://www.iqidi.com/H5/device?devicecode=" + i;
//使用jquery.qrcode的做法
//$("#imgDevice" + i).qrcode({ width: 100, height: 100, text: url });
//$("#imgDevice" + i).css("height", "100px");
//使用qrcodejs的做法
var qrcode = new QRCode(document.getElementById("imgDevice" + i), {
text: url,
width: 128,
height: 128,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
}

最后界面生成的二维码如下所示。

3、条形码和二维码的打印处理

介绍我二维码和条形码的生成,关于它们的打印,可以利用我介绍过的CLODOP进行打印处理,需要了解可以参考下随笔基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息

我们在这里介绍的打印,也是基于这个控件的打印处理的。

当然,如果打印,也是可以利用PrintThis这个组件进行处理的(详细可以参考随笔基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作),不过总体效果没有上面的CLODOP的打印效果佳。

打印JS代码如下所示,可以采用下面两个函数的其中之一进行处理。

//使用表格格式化输出
function PrintBarcodeWithTable() {
LODOP = getLodop();
LODOP.PRINT_INIT("条码_格式化输出");
var strHTML = "<table border='0' width='100%' >";
strHTML = strHTML + "<tr><td>";
strHTML = strHTML + $("#barDiv1").html();
strHTML = strHTML + "</td></tr>";
strHTML = strHTML + "<tr><td>";
strHTML = strHTML + $("#barDiv2").html();
strHTML = strHTML + "</td></tr>";
strHTML = strHTML + "<tr><td>";
strHTML = strHTML + $("#barDiv3").html();
strHTML = strHTML + "</td></tr>";
LODOP.ADD_PRINT_TABLE(88, 200, 700, 900, strHTML);
LODOP.SET_SHOW_MODE("PREVIEW_IN_BROWSE", 1);
LODOP.PREVIEW();
}
//使用分页输出
function PrintBarcodeWithPaging() {
LODOP = getLodop();
LODOP.PRINT_INIT("条码_分页输出");
LODOP.ADD_PRINT_HTM(100, 100, 600, 800, $("#barDiv1").html());
LODOP.NewPage();
LODOP.ADD_PRINT_HTM(100, 100, 600, 800, $("#barDiv2").html());
LODOP.NewPage();
LODOP.ADD_PRINT_HTM(100, 100, 600, 800, $("#barDiv3").html());
LODOP.NewPage();
LODOP.SET_SHOW_MODE("PREVIEW_IN_BROWSE", 1);
LODOP.PREVIEW();
}

条码的打印效果如下所示。

而打印二维码的JS代码如下所示。

//打印二维码
function PrintQrcode2() {
CreatePrintData($("#qrcode").html());
LODOP.SET_SHOW_MODE("PREVIEW_IN_BROWSE", 1);
LODOP.PREVIEW();
}
//打印数据构建
function CreatePrintData(html) {
LODOP = getLodop();
LODOP.PRINT_INIT("");
//var strBodyStyle = "<link type='text/css' rel='stylesheet' href='/Content/Themes/Default/style.css' />";
var strBodyStyle = "<style><!--table { border:1;background-color: #CBCBCC } td {border: 1; }";
strBodyStyle += " th { background-color:#F1F1F3;padding-left:5px;border:1}--></style>";
var strFormHtml = strBodyStyle + "<body>" + html + "</body>";
LODOP.ADD_PRINT_HTM(20, 40, 710, 900, strFormHtml);
LODOP.PREVIEW();
}

得到的二维码打印效果如下所示。

最终完成了这个关于条形码、二维码的动态生成,以及图形打印的相关操作了。整个模块的界面如下所示。

关于条形码、二维码的处理,我们这里引入的条形码组件JsBarcode和二维码组件qrcodejs是非常不错的开源JS组件,满足了我们大多数的要求,而且使用方便、简洁,希望这些内容能够给你的项目提供灵感及用处。

以上所述是小编给大家介绍的基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

时间: 2016-08-28

一个基于flask的web应用诞生 bootstrap框架美化(3)

经过上一章的内容,其实就页面层来说已结可以很轻松的实现功能了,但是很明显美观上还有很大的欠缺,现在有一些很好的前端css框架,如AmazeUI,腾讯的WeUI等等,这里推荐一个和flask集成很好的bootstrap框架 安装框架 在模板中直接引用bootstrap的CDN或者本地路径外,还可以直接应用flask的bootstrap集成包,首先需要对集成包进行安装: pip3.6 install flask-bootstrap 这是一个flask的扩展包,flask的所有扩展包默认默认的包名都为

网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法

网站发布到IIS后,发现网站使用的Bootstrap框架所引用的woff字体无法正常显示.于是跟踪http请求,发现woff字体请求出现GET .woff 404 (Not Found)的问题,但是项目中woff字体的文件并未丢失.后经排查,原来是服务器上IIS没有添加woff字体的MIME类型,导致发送HTTP请求时,IIS无法处理和识别此类型的文件. 解决方法1:在Web.config配置文件中添加woff字体的MIME类型 解放方法2:在IIS中添加woff字体的MIME类型 woff字体

如何使用bootstrap框架 bootstrap入门必看!

前言: 前几天,本想做一个登陆界面,但自己写form表单必然很丑,所以想用下bootstarp框架,之前听别人说bootstrap很牛的样子.但我完全不会bootstrap... 下载&目录 看bootstrap官网,接着我下载了用于生产环境Bootstrap: 解压出来是这样的: 目录结构大概是这样的,前几天在官网有看到.下面这个目录结构你应该先了解下: bootstrap3 ├── css │├── bootstrap-theme.css //主题类型,生产上一般用不到 │├── boots

Bootstrap一款超好用的前端框架

前  言     Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,用于开发响应式布局.移动设备优先的 WEB 项目.Bootstrap在JQuery的基础上进行了更为个性化的完善,形成一套自己独有的网站风格,并兼容大部分jQuery插件.让前端开发更快速.简单. 基本结构:Bootstrap 提供了一个带有网格系统.链接样式.背景的基本结构. CSS:Bootstrap 自带以下特性:全局的 CSS设置.定义基本的 HTML 元素样式.可扩展的 class,以及一个先进的

使用Bootstrap框架制作查询页面的界面实例代码

以Bootstrap框架来进行设计和开发,是目前国际上比较流行的一个趋势.很多软件公司在优化新产品时,因为其在js和控件上的综合优势,会选用这个开发框架. Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺点是定制了界面,调整的余地不是太大).尤其是现在的响应时布局(我的理解是页面根据不同的分辨率,采用不同的页面元素的布局),在Bootstrap中很好的支持了,只要简单设置了属性,就能自动实现响应时布局,大大简化了程序员的界面的过程. 因此,本人

Bootstrap框架下下拉框select搜索功能

之前用Easyui框架下做的下拉框选择,虽然可以搜索,但是有诸多的不便:比如,不能模糊匹配,必须按照第一个字母来搜索 心血来潮,想换个框架写后台,然后用Bootstrap搭了个架子,然后两种样式冲突,百度了一把,找到了另一个牛逼的基于Bootstrap下拉框搜索功能的js 不区分大小写,模糊匹配,哈哈,太棒了~~ 具体用法: <script type="text/javascript" src="<%=basePath%>/js/commons/jquery

基于mvc5+ef6+Bootstrap框架实现身份验证和权限管理

近和朋友完成了一个大单子架构是mvc5+ef6+Bootstrap,用的是vs2015,数据库是sql server2014.朋友做的架构,项目完成后觉得很多值得我学习,在这里总结下一些心得. 创建项目一开始删掉App_Start目录下的IdentityConfig.cs和Startup.Auth.cs文件;清空Modle文件夹,Controller文件夹和相应的View; 删除目录下的ApplicationInsights.config文件和Startup.cs文件 修改web.config文

基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合

在上篇给大家介绍了基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串.list集合. 这种方式其实还是利用list集合的方式传给前台,只不过在前台做了一些小小的变化,而控制器代码也进行了部分的优化,值的一提的是:没用的ajax前后台交互舍弃掉了. 控制器代码如下: //实例化公共静态字典表集合 public static List<TC_DictionaryInfo> DInfo = new List<TC_DictionaryInfo

基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合

本文支持两种方式的数据,一种为List集合,一种为json字符串. 先来介绍一下后台返回list集合(推荐使用此方法): 控制器代码如下: public static List<TC_DictionaryInfo> DInfo = new List<TC_DictionaryInfo>(); /// <summary> /// TreeView视图 /// </summary> /// <returns></returns> publ

基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果

最近基于jQuery和Bootstrap框架实现了一个仿知乎动态列表的前端效果,基本实现了和知乎动态列表相同的效果.如下: 1.基本列表项 2.列表项全文展开.折叠(图中为展开第一项) 3.评论项展开 4.列表数据加载(加载全部) 5.带动画效果的点赞功能 6.回复列表的hover显示功能 HTML代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta h

SQL Server 2012 身份验证(Authentication)

在保密你的服务器和数据,防备当前复杂的攻击,SQL Server有你需要的一切.但在你能有效使用这些安全功能前,你需要理解你面对的威胁和一些基本的安全概念.这篇文章提供了基础,因此你可以对SQL Server里的安全功能充分利用,不用在面对特定威胁,不能保护你数据的功能上浪费时间. 身份验证是验证主体(需要访问SQL Server数据库的用户或进程,是声称是的人或物)的过程.主体需要唯一的身份,这样的话SQL Server可以决定主体有哪个许可.在提供安全访问数据库对象中,正确的身份验证是必须的

PHP中配置IIS7实现基本身份验证的方法

在PHP运行环境中配置IIS7实现基本身份验证的方法,其实IIS7身份验证的方法有好几种,比如Windows身份验证.摘要式身份验证等,相对来说IIS7基本身份验证是最简单的一种,下面以图文方式介绍下IIS7基本身份验证的实现方法及注意事项,希望对PHP入门学习的朋友有所帮助. 准备工作 1.由于默认IIS7并没有安装配置身份验证功能,所以如果想要实现IIS7基本身份验证,首先必须安装IIS7身份验证功能,你需要打开 控制面板>程序和功能>打开或关闭Windows功能,找到IIS,选择基本身份

SpringBoot2.0整合Shiro框架实现用户权限管理的示例

GitHub源码地址:知了一笑 https://github.com/cicadasmile/middle-ware-parent 一.Shiro简介 1.基础概念 Apache Shiro是一个强大且易用的Java安全框架,执行身份验证.授权.密码和会话管理.作为一款安全框架Shiro的设计相当巧妙.Shiro的应用不依赖任何容器,它不仅可以在JavaEE下使用,还可以应用在JavaSE环境中. 2.核心角色 1)Subject:认证主体 代表当前系统的使用者,就是用户,在Shiro的认证中,

Laravel框架用户登陆身份验证实现方法详解

本文实例讲述了Laravel框架用户登陆身份验证实现方法.分享给大家供大家参考,具体如下: laravel中检测用户是否登录,有以下的代码: if ( !Auth::guest() ) { return Redirect::to('/dashboard'); } 那Auth::guest是如何调用的呢? laravel用了Facade模式,相关门面类在laravel/framework/src/Illuminate/Support/Facades文件夹定义的,看下Auth类的定义: class

thinkphp5框架API token身份验证功能示例

本文实例讲述了thinkphp5框架API token身份验证功能.分享给大家供大家参考,具体如下: 使用说明:登陆时生成token和刷新用的refresh_token,返回给客户端,客户端收到保存本地localStorage等,每次访问接口带上token,后端验证token存在并且一致后方可执行接下来的动作,假如不存在就返回token过期,客户端调用刷新接口传入token和refresh_token,服务器端进行验证,验证通过重新生成新的token保存数据库,返回给客户端客户端刷新本地toke

Asp.Net Core中基于Session的身份验证的实现

在Asp.Net框架中提供了几种身份验证方式:Windows身份验证.Forms身份验证.passport身份验证(单点登录验证). 每种验证方式都有适合它的场景: 1.Windowss身份验证通常用于企业内部环境,Windows Active Directory就是基于windows平台的身份验证实现: 2.Forms身份验证是Asp.Net框架中提出的另一种验证方式: 3.passport身份验证是微软提供的基于自己的lives账号实现的单点认证服务. Asp.net Core验证码登录遇到