在很多项目里面,对条形码和二维码的生成和打印也是一种很常见的操作,在Web项目里面,我们可以利用JS生成条形码和二维码的组件有很多。本文引入两个比较广泛使用的JS组件,用来处理条形码和二维码的生成处理,并介绍如何利用CLodoP组件实现内容的打印输出。
生成条形码使用组件JsBarcode,生成二维码使用组件qrcodejs。
1、条形码的生成
条码的作用一般在一些商品标签上,方便使用条码枪快速、准确录入信息。
如下所示是一种条形码
这里条形码生成使用了JsBarcode组件进行处理,它支持很多格式的条码格式,如下所示。
它的简单代码例子如下所示。
rush:js;">
//
HTML代码
生成的图片格式如下所示。
JsBarcode组件支持多种选项参数的设置,如下所示的代码
rush:js;">
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):