vue 中生成二维码、条形码

最新推荐文章于 2025-05-21 16:18:31 发布

原创

最新推荐文章于 2025-05-21 16:18:31 发布 · 3.6k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#vue #条形码 #二维码 #插件

本文介绍了在Vue项目中如何生成条形码和二维码。通过引入jsbarcode库来生成条形码，详细步骤包括npm安装、组件引入及模板使用。对于二维码的生成，文章推荐了qrcode插件，同样包含npm安装和模板使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在 vue 项目中难免遇到有要生成条形码或者二维码的功能需求。

一、生成条形码

1、下载 npm install jsbarcode --save

2、在所需组件模块中引入

 import JsBarcode from 'jsbarcode'

3、template 中

 <svg id="barcode"></svg>

4、

 barcode(){
        let barCode = "12345678"
        JsBarcode("#barcode", "Hi world!",{
          format: "CODE128",//选择要使用的条形码类型
          text: barCode,    //显示文本
          displayValue: true,//是否在条形码下方显示文字
          textPosition: "bottom"//设置文本的垂直位置
          fontOptions:"bold italic",//使文字加粗体或变斜体
          background:"#eee",//设置条形码的背景
          font:"fantasy",//设置文本的字体
          lineColor:"#2196f3",//设置条和文本的颜色。
          margin:15//设置条形码周围的空白边距
        })
      },

以上步骤就可以生成一个条形码至于何时调用 barcode 这个方法就看我们自己啦！

有许多参数也给大家写了出来，大家自行选自所需参数哈！