基于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 相关文章推荐
Windows Live的@live.com域名注册漏洞 利用代码
Dec 27 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
Feb 02 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
Jul 09 Javascript
jquery模拟alert的弹窗插件
Jul 31 Javascript
JavaScript简单下拉菜单实例代码
Sep 07 Javascript
JavaScript获取URL参数的方法之一
Mar 24 Javascript
Angular4 中常用的指令入门总结
Jun 12 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
Jul 24 Javascript
JS设计模式之单例模式(一)
Sep 29 Javascript
Webpack实战加载SVG的方法
Dec 26 Javascript
js原生方法被覆盖,从新赋值原生的方法
Jan 02 Javascript
微信小程序冒泡事件及其阻止方法实例分析
Dec 06 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计算函数执行时间的方法
2015/03/20 PHP
php数组冒泡排序算法实例
2016/05/06 PHP
浅谈PHP Cookie处理函数
2016/06/10 PHP
php版微信小店API二次开发及使用示例
2016/11/12 PHP
javascript 屏蔽鼠标键盘的几段代码
2008/01/02 Javascript
setAttribute 与 class冲突解决
2008/02/17 Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
js操作iframe兼容各种主流浏览器示例代码
2013/07/22 Javascript
页面实时更新时间的JS实例代码
2013/12/18 Javascript
jquery选择器之属性过滤选择器详解
2014/01/27 Javascript
jquery跟随屏幕滚动效果的实现代码
2016/04/13 Javascript
深入浅出 jQuery中的事件机制
2016/08/23 Javascript
angularjs下拉框空白的解决办法
2017/06/20 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
2017/11/23 Javascript
Vue Cli3 创建项目的方法步骤
2018/10/15 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
2020/01/05 Javascript
[46:00]Ti4 冒泡赛第二轮LGD vs C9 2
2014/07/14 DOTA
Python脚本在Appium库上对移动应用实现自动化测试
2015/04/17 Python
python3操作mysql数据库的方法
2017/06/23 Python
Python paramiko模块的使用示例
2018/04/11 Python
Jupyter notebook远程访问服务器的方法
2018/05/24 Python
使用python socket分发大文件的实现方法
2019/07/08 Python
python  文件的基本操作 菜中菜功能的实例代码
2019/07/17 Python
Python直接赋值及深浅拷贝原理详解
2020/09/05 Python
优质有机椰子产品:Dr. Goerg
2019/09/24 全球购物
下面这个程序执行后会有什么错误或者效果
2014/11/03 面试题
测绘工程系学生的自我评价
2013/11/30 职场文书
初中生个人学习的自我评价
2013/12/04 职场文书
绩效考核实施方案
2014/03/18 职场文书
森林病虫害防治方案
2014/06/02 职场文书
承诺书模板大全
2015/05/04 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书
2016年敬老月活动总结
2016/04/05 职场文书
python 中[0]*2与0*2的区别说明
2021/05/10 Python
一次SQL如何查重及去重的实战记录
2022/03/13 MySQL