FAST - 生成条码/二维码

C̶r̶a̶y̶o̶-杭州 11月前 729

                                                 我们拿详情页面来做例子

1、下载JsBarcode.jsqrcode.Js
2、在详情页面拿到你要生成条码的值
3、获取要生成条码/二维码的值放入input隐藏域里面

    条码
    <input type="hidden" id="barcode_src" value="{$row.order_code}">
    二维码
    <input type="hidden" id="qrcode_src" value="{$row.order_code}">

4、<svg></svg>标签来显示条码,<div></div>标签来显示二维码

    条码
    <svg id="barcode"></svg>
    二维码
    <div id="qrcode"></div>

image.png

5、在对应的js里面的detail: function ()方法里面加上

require.config({
    paths : {
        "jsBarcode" : ["/x/x/JsBarcode"],
        "qrcode" : ["/x/x/qrcode"],
    }
});
require(["jsBarcode","qrcode"], function (JsBarcode,Qrcode){
    $("#barcode").JsBarcode($("#barcode_src").val());
    $("#qrcode").qrcode({
        render: "canvas",
        width: 200,
        height: 200,
        text: $("#qrcode_src").val()
    });
});

QQ截图20181116155910.png
QQ截图20181116155955.png
qrcode使用方法

                                            grin  欢迎小伙伴们优化!grin 
最后于 3月前 被C̶r̶a̶y̶o̶-杭州编辑
最新回复 (12)
  • Karson 打赏 11月前
    感谢TA
    0 引用 2

    @LovePHP 感谢你的分享,使用方法完全正确。

  • 时代网络 11月前
    感谢TA
    0 引用 3

    感谢分享,好东西,用的到

  • F4NNIU 打赏 11月前
    感谢TA
    0 引用 4

    感谢分享。

  • 时代网络 11月前
    感谢TA
    0 引用 5

    $("#barcode").JsBarcode($("#src").val()); 这样可以,下面带配置就不行。

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

    user.js?v=1522382542:162 Uncaught TypeError: JsBarcode is not a function

    什么原因?

  • C̶r̶a̶y̶o̶-杭州 楼主 11月前
    感谢TA
    0 引用 6

    @时代网络
    JsBarcode is not a function 没有找到JsBarcode,检查一下是否有引用
    可以参考 https://www.cnblogs.com/huangenai/p/6347607.html

  • 时代网络 11月前
    感谢TA
    0 引用 7

    引用没问题

    options = {
        format:"EAN13",
        displayValue:true,
        fontSize:18,
        height:100
    };
    $('#barcode').JsBarcode("6944312683503", options);//jQuery

    上面这段能执行,下面的就不能执行了

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

    查了一下,网上说这种是 js原生写法,不知道在 fa里面, 怎么调用原生的。 通过 require.js 就有点搞不懂了

  • Karson 打赏 11月前
    感谢TA
    0 引用 8

    @时代网络 @LovePHP 小伙伴已经为你解答得很清楚了哦。

  • 时代网络 11月前
    感谢TA
    0 引用 9
    test.html
    <script src="jsbarcode.all.min.js"></script>
    <svg class="pull-right" id="barcode"></svg>
    
    <script>
    
    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();
    </script>

    image.png

    我的意思是单独写,没引用jquery时能执行,为什么 代码放在 publicassetsjsbackenduseruser.js 里就不能执行了。检查发现 require也加载了jsbarcode.all.min.js,但只能用
    $("#barcode").JsBarcode 这样的写法。 而 JsBarcode("#barcode") 这样的就不行了,是否跟 require.js有关,因为这块不懂,不是很好理解。

  • 时代网络 11月前
    感谢TA
    0 引用 10
    window.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();

    问题解决了,前面加一个 window. 就行了

  • 胡导 11月前
    感谢TA
    0 引用 11

    大神越来越多,论坛越来越牛逼了,写得也很详细。

  • yknt 24天前
    感谢TA
    0 引用 12

    为什么 代码放在 publicassetsjsbackenduseruser.js 里就不能执行了 不知其他人有解决方法吗, 我照葫芦画瓢的 代码 和 群主一样 但是最后报错 Uncaught TypeError: $(...).qrcode is not a function 有人知道吗

  • yknt 24天前
    感谢TA
    0 引用 13

    最后这样写 成功了 require(['qrcode'], function (Qrcode){

                var qrcode = new QRCode("barcode_qrcode", {
                    text: "https//blog.csdn.net/crper",
                    width: 100,
                    height: 100,
                });
  • 未登录
    14
返回