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


Posted in Javascript onAugust 29, 2016

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

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

1、条形码的生成

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

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

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

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

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

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

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

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

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"
});
}

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

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

从这里我们可以看到,使用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
});
}

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

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

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();
}

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

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

而打印二维码的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();
}

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

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

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

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

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

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

Javascript 相关文章推荐
JavaScript 字符串处理函数使用小结
Dec 02 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
Dec 12 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
Jul 10 Javascript
ListBox实现上移,下移,左移,右移的简单实例
Feb 13 Javascript
jQuery中last()方法用法实例
Jan 06 Javascript
JS实现的多张图片轮流播放幻灯片效果
Jul 22 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
详解Angular的8个主要构造块
Jun 20 Javascript
JavaScript生成指定范围随机数和随机序列的方法
May 05 Javascript
JS实现计算小于非负数n的素数的数量算法示例
Feb 26 Javascript
JS遍历树层级关系实现原理解析
Aug 31 Javascript
vue video和vue-video-player实现视频铺满教程
Oct 30 Javascript
学习掌握JavaScript中this的使用技巧
Aug 29 #Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
Aug 29 #Javascript
浅谈jQuery为哪般去掉了浏览器检测
Aug 29 #Javascript
jQuery为动态生成的select元素添加事件的方法
Aug 29 #Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
Aug 29 #Javascript
ionic隐藏tabs的方法
Aug 29 #Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 #Javascript
You might like
用PHP制作静态网站的模板框架(一)
2006/10/09 PHP
PHP语言中global和$GLOBALS[]的分析 之二
2012/02/02 PHP
巧用php中的array_filter()函数去掉多维空值的代码分享
2012/09/07 PHP
PHP发送短信代码分享
2015/08/11 PHP
php解析url并得到url中的参数及获取url参数的四种方式
2015/10/26 PHP
PHP CURL或file_get_contents获取网页标题的代码及两者效率的稳定性问题
2015/11/30 PHP
php is_writable判断文件是否可写实例代码
2016/10/13 PHP
laravel withCount 统计关联数量的方法
2019/10/10 PHP
浅谈laravel数据库查询返回的数据形式
2019/10/21 PHP
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
2006/06/26 Javascript
两个比较有用的Javascript工具函数代码
2010/02/17 Javascript
JavaScript中eval()函数用法详解
2015/12/14 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
2017/09/03 Javascript
详解 vue.js用法和特性
2017/10/15 Javascript
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
VueJs 将接口用webpack代理到本地的方法
2017/11/27 Javascript
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
浅谈Node框架接入ELK实践总结
2019/02/22 Javascript
[44:41]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
用python写个自动SSH登录远程服务器的小工具(实例)
2017/06/17 Python
利用numpy实现一、二维数组的拼接简单代码示例
2017/12/15 Python
windows下python安装小白入门教程
2018/09/18 Python
Pycharm和Idea支持的vim插件的方法
2020/02/21 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
html5指南-4.使用Geolocation实现定位功能
2013/01/07 HTML / CSS
软件测试笔试题
2012/10/25 面试题
网站编辑求职信
2013/10/17 职场文书
进步之星获奖感言
2014/02/22 职场文书
公务员政审个人鉴定
2014/02/25 职场文书
公益广告语集锦
2014/03/13 职场文书
会计员岗位职责
2014/03/15 职场文书
初三学习计划书范文
2014/04/30 职场文书
会计演讲稿范文
2014/05/23 职场文书
财务会计实训报告
2014/11/05 职场文书
小平您好观后感
2015/06/09 职场文书
演讲开头怎么书写?
2019/08/06 职场文书