vue 生成二维码(带logo)与条形码

原创已于 2024-04-08 16:36:54 修改 · 1.5k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #前端框架 #elementui

于 2022-10-07 04:34:22 首次发布

本文介绍如何使用Vue.js和JsBarcode库生成二维码和条形码。通过具体代码示例展示了如何设置二维码的颜色、尺寸及图标，并实现了条形码的自定义样式。

1.生成二维码安装

npm install --save qrcodejs

实现代码

<template>
  <div>
          <qrcode :url="jmc" :iconurl="icon" :wid="200" 
          :hei="200" :imgwid="100" :imghei="100"
          colorLight="#ffffff" colorDark="#333333"
          />
          <!-- wid二维码宽度 hei二维码高度 imgwid图标宽度 imghei图标高度-->
          <!-- colorLight二维码背景色 colorDark二维码颜色-->
  </div>
</template>
<script>
import qrcode from "vue_qrcodes"; //引入
export default {
   components: { qrcode},
   data(){
      return{
        jmc: '45654wssedws41', //二维码生成的内容
        icon: "https://cn.vuejs.org/images/logo.png", //二维中间的图标
      }
   },
}
</script>

效果图：

2.生成条形码安装

npm install jsbarcode --save

实现代码

<template>
  <div>
           <!-- 条形码 -->
           <img id="barcode"/>
  </div>
</template>
<script>
import JsBarcode from 'jsbarcode'
export default {
   data(){
      return{
         
      }
   },
   mounted(){
       let str = '1554aswsdf78'
       JsBarcode("#barcode", str, {
           format: "CODE128",
            lineColor: "#000",
            displayValue:true,//true显示低部文本,false隐藏低部文本
            fontSize: 12, //低部文本字体大小
            width: 1.7, 
            height: 30,
      });
           
   },
}
</script>

效果图：