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

发布时间：2020-12-18 00:50:10 所属栏目：安全来源：网络整理

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

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

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

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

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

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

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

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

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

<div class="row" id="barDiv1">
<div class="col-md-4 col-sm-4 col-xs-4">
条形码(770 145 896 701)：

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

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

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

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

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

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

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

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

介绍我二维码和条形码的生成，关于它们的打印，可以利用我介绍过的CLODOP进行打印处理，需要了解可以参考下随笔

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

当然，如果打印，也是可以利用PrintThis这个组件进行处理的（详细可以参考随笔），不过总体效果没有上面的CLODOP的打印效果佳。

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

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

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

" + html + ""; LODOP.ADD_PRINT_HTM(20,40,710,strFormHtml); LODOP.PREVIEW(); }

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

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

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

以上所述是小编给大家介绍的基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!