生成条码 -- jsbarcode

作用，将文本转为条形码，不同的条码规则创建出来的条形码的大小以及疏密程度不一致

首先，安装依赖

 npm install jsbarcode --save-dev

在需要的页面进行引入

 import JsBarcode from 'jsbarcode';

使用：

 /*@param {content}  生成条码的位置@param {text }  用于生成条码的文本@param {option}  默认配置项目*/JsBarcode(content, text , option);

关于默认配置项有以下这些，按需配置

 { 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的合法值支持：

 CODE128CODE128 (自动模式切换)CODE128 A/B/C (强制模式)EANEAN-13EAN-8EAN-5EAN-2UPC (A)CODE39ITF-14MSIMSI10MSI11MSI1010MSI1110PharmacodeCodabar

这是实际的例子（当初为了模拟条形码扫描做的扫码板）：

 <template><div class="trayContent" ><div class="trayItem"  v-for="(item,index) in trayList" :key="index"><canvas :id="'trayItem'+index"  style="width:200px;height:80px;" :key="index" @click.stop="stopPop"></canvas><div>{{item}}</div></div></div></template><script>import JsBarcode from 'jsbarcode'import trayList from './trayNum'export default {data () {return {trayList,}},mounted(){console.log(trayList);this.genCode();},methods:{stopPop(){},genCode(){this.$nextTick(()=>{this.trayList.forEach((item,index)=>{console.log(`#trayItem${index}`)JsBarcode(`#trayItem${index}`, item, {displayValue:false});})})},}}</script><style scoped>.trayContent{display:flex;flex-wrap: wrap;align-items: center;        }.trayItem{margin-top:35px;margin-right:10px;width:200px;height:80px;background:white;display:flex;flex-wrap:wrap;align-items: center;justify-content: center;border:1px solid #e8e8e8;}</style>

效果图：

代码中用到的trayNum.js:

     let trayList = ['0002995', '0001455', '0001353', '0003125', '0001319', '0003139', '0003129', '0003076', '0001351', '0001373', '0001341', '0001344', '0001370', '0003138', '0001379', '0003006', '0001316', '0001313', '0003126', '0001382', '0001364', '0001324', '0001336', '0001512', '0001377', '0001333', '0001359', '0003008', '0003000', '0001375', '0003197', '0003080', '0001331', '0001369', '0001346', '0003122', '0001329', '0003078', '0001515', '0001521', '0001343', '0002085', '0001366', '0003120', '0003130', '0003140', '0003079', '0003194', '0003114', '0001518', '0001349', '0003123', '0003109', '0003141', '0001323', '0001354', '0003188', '0001385', '0001509', '0001321', '0001314', '0001361', '0003108', '0001372']export default trayList;

用于存放的容器，必须是canvas节点或者 svg 节点：

 <canvas :id="'trayItem'+index"  style="width:200px;height:80px;" :key="index" @click.stop="stopPop"></canvas>

format 不同绘制的码不同:

1.CODE39

使用svg做容器的时候,需要设置高度

2.CODE128

CODE128 与CODE39 的区别：

根据自己的实际需求进行设置

生成条码 -- jsbarcode相关推荐

JAVA生成条码（jbarcode）
条码技术在现在的应用非常广泛,几乎所有的商品包装上都会印有条形码,这一篇将通过实例演示JAVA如何生成条码,需要使用的第三方包为:jbarcode import java.awt.image.Buff ...
html如何生成条形码,前端如何生成条形码---JsBarcode
React 生成条形码代码注:需引入 jsbarcode 插件 import React from 'react'; import JsBarcode from 'jsbarcode'; class ...
ZPL 打印条码、二维码及小票（中文/汉字），生成条码、二维码图片【Asp.Net】-含示例代码
生成条码(图1).二维码(图2)图片及打印出二维码标签(图3)效果图1 图2 ...
excel 批量生成条码
2019独角兽企业重金招聘Python工程师标准>>> 参考网站: https://jingyan.baidu.com/article/597a06434f1b12312b52430 ...
用条码标签打印软件生成条码的校验码
一维码的类型有很多种,有些类型最后一个字符是校验码,根据前面的数据计算得出,作用是条码的正确性校验,如EAN-13\8.UPC-A\E等类型. 条码,英文名称barcode,又称条形码,常用种类分为一 ...
excel数据生成条码或者二维码并放在表格中（VBA）
最近做的项目要将一列数据生成条码和二维码,并打印这是一个简单的表格操作嵌入式脚本目的是生成二维码或条码直接上代码 Sub 批量生成二维码()Dim k As Long, i As Long, j ...
js 生成条码和打印
需求条形码上边显示汉字,下边显示码值,如下图. 研究条形码规范对条形码是否能显示汉字,不确定,只能研究规范了. 研究得知,条形码也就是一维码,有很多规范,所有的规范都不支持汉字,所以在条形码上边 ...
vue中生成条形码(jsbarcode)、二维码(qrcodejs2)
1.条形码插件jsbarcode 安装:npm install jsbarcode --save 引入:在需要生成条形码的页面引入即可 import JsBarcode from 'jsbarcode ...
php动态执行生成条码,PHP生成条形码之二开源之道
该软件支持PHP4和PHP5两个版本,本文中使用的是PHP5的版本.在使用前注意要将PHP的GD模块开启.在Windows中为php_gd2.dll,Linux中为gd.so.将压缩文件解压到Apac ...
工具说明书 - 使用网页生成条码
使用如下网页链接,用来生成一维或二维条码: Free Online Barcode Generator: Create Barcodes for Free! 使用这个可以输入特殊条码,比如Functi ...

生成条码 -- jsbarcode

生成条码 -- jsbarcode相关推荐

最新文章

热门文章