【记录30】条形码的生成

最新推荐文章于 2024-09-08 16:32:19 发布

湘水狱

最新推荐文章于 2024-09-08 16:32:19 发布

阅读量435

点赞数

分类专栏：案例文章标签：条形码 jsbarcode

本文链接：https://blog.csdn.net/weixin_45527702/article/details/124880509

版权

案例专栏收录该内容

51 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用JSBarcode库在前端生成不同类型的条形码，包括CODE128、EAN等，并提供了配置参数示例和实际代码片段。注意在使用时，条形码内容需遵循各格式的字符限制，避免出现中文导致的错误。

摘要由CSDN通过智能技术生成

npm install jsbarcode --save
在使用的页面 import jsbarcode from ‘jsbarcode’

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
Codabar
不同格式的案例转载这位博主的

{
width: 2,//较细处条形码的宽度
height: 100, //条形码的宽度，无高度直接设置项，由位数决定，可以通过CSS去调整，见下
quite: 10,
format: “CODE128”,
displayValue: false,//是否在条形码下方显示文字
font:“monospace”,
textAlign:“center”,
fontSize: 12,
backgroundColor:“”,
lineColor:“#000”//条形码颜色
}

代码块：注意默认format下只能输入字母和数字，切记不可有中文，否则报错
<template>
    <div>
        <van-field name="barcode" v-model="barcode" label="条形码"></van-field>
        <van-button type="info" round size="small" text="生成" @click="generate"></van-button>
        <div>
            <!-- <img id="img" width="300px" height="100px" /> -->
            <img id="img2" />
        </div>
    </div>
</template>
<script>
import JsBarCode from 'jsbarcode'
export default {
    data() {
        return {
            barcode: "",
        }
    },
    mounted() {

    },
    methods: {
        generate() {
            console.log(this.barcode);
            JsBarCode("#img2",this.barcode)
            // JsBarCode("#img2",'DC DC FF E2 05 3C 09')
            // JsBarCode("#img",'00 25 89 76 24')
            // JsBarCode("#img",'dfdfd', 
            // {
            //     format: "pharmacode",
            //     lineColor: "#000",
            //     width: 4,
            //     height: 40,
            //     displayValue: true,
            // }
            // )
        }
    }
}
</script>