基于Bootstrap的Metronic框架实现条码和二维码的生成(2)

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

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

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

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

//使用表格格式化输出 function PrintBarcodeWithTable() { LODOP = getLodop(); LODOP.PRINT_INIT("条码_格式化输出"); var strHTML = "<table >"; 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' href='https://www.jb51.net/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框架实现条码和二维码的生成及打印处理操作,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzfjyp.html