前端动态生成二维码与条形码

二维码

1.导入qrcode.js

vue项目：在main.js中引入导入的qrcode.js文件

import '../static/js/qrcode.js'

在需要显示二维码的页面

<div>

       <div id="qrcode"></div>

</div>

js:

mounted(){

    var qrcode = new QRCode('qrcode', {

         text: 'your content',

         width: 256,

         height: 256,

         colorDark : '#000000',

         colorLight : '#ffffff',

         correctLevel : QRCode.CorrectLevel.H

   });

}

 

2.导入jquery.qrcode.min.js

在需要生成二维码的页面中

mounted(){

      this.$nextTick(function(){

           require('../../static/js/jquery.qrcode.min.js');

           this.qrcode();

      })

}

methods:{

    qrcode(){

         $("#qrcode").qrcode({

              text: "http://www.baidu.com",

              width:200,

              height:200

         });

    },

}

 

条形码

html页面：

<div class="qrCanvas">

      <canvas id="canvascode"></canvas>

</div>

给画布定宽高
js:

$('#canvascode').JsBarcode(‘参数’)