JsBarcode做条形码、qrCode做二维码用法详解

578 阅读2分钟

'> 背景:根据项目需求根据后端提供的设备编号生成对应的条形码,并点击下载按钮,把条形码图片和excel表打包下载。这篇文章就分享一下制作条形码和二维码的用法。

一、生成条形码

// JsBarcode (DOM标签,扫码后显示的内容, {配置})
JsBarcode("#imgcode", "123", {
 format: "CODE39",//选择要使用的条形码类型
 width:3,//设置条之间的宽度
 height:100,//高度
 displayValue:true,//是否在条形码下方显示文字
 text:"456",//覆盖显示的文本
 fontOptions:"bold italic",//使文字加粗体或变斜体
 font:"fantasy",//设置文本的字体
 textAlign:"left",//设置文本的水平对齐方式
 textPosition:"top",//设置文本的垂直位置
 textMargin:5,//设置条形码和文本之间的间距
 fontSize:15,//设置文本的大小
 background:"#eee",//设置条形码的背景
 lineColor:"#2196f3",//设置条和文本的颜色。
 margin:15//设置条形码周围的空白边距
});

配置中的format的条形码支持:

format
CODE128
CODE128 (自动模式切换)
CODE128 A/B/C (强制模式)
EAN
EAN-13
EAN-8
EAN-5
EAN-2
UPC (A)
CODE39
ITF-14
MSI
MSI10
MSI11
MSI1010
MSI1110
Pharmacode

如果不知道条形码使用时候的码制是什么,那选'CODE128'就对了

1.项目安装 jsbarcode 依赖

npm i jsbarcode --save

2.在所需组件模块中导入

import JsBarcode from 'jsbarcode'

3.template部分

<img
     id="barcode"
     width="185"
     height="100"
     :src="item.barcodeNo"/>

4.js部分

...

    JsBarcode('barcode', 'K神是自封的神', {
        format: 'auto',
        lineColor: '#000',
        background: '#f2f2f2',
        width: 1,
        height: 50,
        text: '努力没用?'
    })

...

实现效果:

image.png

二、生成二维码

1.项目安装 jsbarcode 依赖

 npm i qrcodejs2 --save

2.导入

import QRCode form 'qrcodejs2'

3.template部分

<div>
    <button style="cursor: pointer" @click="handleQRCode">点击生成二维码</button>
    <div id="qrCode" ref="qrCode"></div>
</div>

4.JS部分

methods: {
    handleQRCode() {
        //方法1: 使用dom标签生成
        new QRCode(document.getElementById("qrCode"), {
            text: '方法1', //二维码内容
            width: 150, // 二维码的宽
            height: 150, //二维码的高
            colorDark: "#333", //二维码的颜色
            colorLight: "#fff", //二维码的背景色
            correctLevel: QRCode.CorrectLevel.L, //容错率, L/M/H
        })
        
        //方法2: 使用ref
        new QRCode(this.$refs.qrCode, {
            text: '方法1', //二维码内容
            width: 150, // 二维码的宽
            height: 150, //二维码的高
            colorDark: "#333", //二维码的颜色
            colorLight: "#fff", //二维码的背景色
            correctLevel: QRCode.CorrectLevel.L, //容错率, L/M/H
        })
    }
}

5.效果

image.git