vue运用JsBarcode生成一维码

第一步，先安装 jsbarcode 插件

npm install jsbarcode --save

第二步，在想要生成JsBarcode的Vue页面引入组件

import JsBarcode from 'jsbarcode';

第三步，调用方法(注意：如果想在页面初始化的时候就展示需要在生命周期 mounted 的方法里调用)

1.在html页面上定义canvas组件，用于绘制码。

<canvas id="testId"/>

selector 是传递你要生产的画布的id，例如你页面上定义了上面的 canvas ，你就需要传 #testId，

data 是一维码的值

JsBarcode(selector, data, { displayValue: true, height: 22,  margin: 5, fontSize: 12 })

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//设置条形码周围的空白边距

具体属性，可以点进去看，或者取官网看api

vue运用JsBarcode生成一维码相关推荐

c语言生成一维条形码,C# BarcodeLib。dll 生成一维码的问题
public Image GetImage(int height,int width, BarcodeLib.TYPE type,string code) { ...
php 生产一维码,透过 PHP 生成一维码
通过 PHP 生成一维码此代码来自 http://www.nixiaofeng.com/110.html 13) die('条码长度不正确'); if (strlen($code) == 12) ...
java 打印一维码_java生成一维码
/** * * 一维码图片生成器 * @author winter.liu * */ public class OneBarcodeUtil { /** * 生成一维码 * @param value ...
Qt zint (生成一维码/二维码)
zint 编译源码添加到工程生成一维码生成DM码 DM码识别下载源码1: (笔者下载最新的zint-master.zip(20210126),不清楚是不是官方维护的github仓库) http ...
java生成一维码和二维码
这两天想了解一下二维码是怎样生成的.然后在网上看了很多资料,也有很多源码可以直接用的.我也没有自己写,也是拿着源码进行看和修改的,然后生成自己想要的二维码和一维码,还是很不错的,所以分享一下. 首先第 ...
用java生成一维码
1.把一个订单或者商品编号生成一维码 [java] view plaincopy import com.sun.image.codec.jpeg.JPEGCodec; import com.sun.i ...
C# 实现生成一维码、二维码
注意 :需要使用以下库文件 using ThoughtWorks.QRCode.Codec; using ZXing; using ZXing.Common; using ZXing.QrCode; ...
C# 生成一维码（条形码）和二维码
前言在使用C#语言进行客户端软件开发时很多时候我们会有需要生成二维码和一维码的需求,在智能工厂和一些商品扫码之类的软件中应用居多,此文章简单记录了一维码和二维码的编码格式和使用ZXing库生成二维码 ...
java生成一维码和二维码，mybatis原理和实现机制
} } return image; } /** 将字符串编成一维条码的矩阵 @param str @param width @param height @return */ public static ...
js生成一维码和二维码
实现效果:页面同时显示一维条形码和二维码引入一维码和二维码的js生成文件:barcode 和 qrcode <script type="text/javascript" s ...

vue运用JsBarcode生成一维码

vue运用JsBarcode生成一维码相关推荐

最新文章

热门文章