JsBarcode的使用

说明

本文档是以JsBarcode 3.11版本为基础说明。JsBarcode官网

JsBarcode是什么

JsBarcode是一个用于生成条形码的js库，支持浏览器和node.js，浏览器端使用不依赖于其他库。

JsBarcode支持的条形码

CODE128
- CODE128 (automatic mode switching)
  支持128个ASCII码
- CODE128 A/B/C (force mode)
EAN
- EAN-13
- EAN-8
- EAN-5
- EAN-2
- UPC (A)
- UPC (E)
CODE39
ITF
- ITF
- ITF-14
MSI
- MSI10
- MSI11
- MSI1010
- MSI1110
Pharmacode
Codabar

用法

浏览器端使用

浏览器的支持性

IE	Google Chrome	FireFox	Safari
9+	9+	12+	5+

使用步骤

引入JsBarcode 的js库
```
<script src="JsBarcode.all.min.js"></script>
```
JsBarcode v3.11.0下载地址
如果确认只会使用某一种条形码，也可以针对条形码类型下载对应的条形码库，不用下载整个包。
页面创建存放条形码容器
页面允许的条形码容器有三种：canvas、svg、img
```
<canvas id="canvas"></canvas>
<img id="barcode"/>
<svg id="barcode"></svg>
```

调用JsBarcode的方法生成条形码

//生成 Hi! 内容的条形码
//第一个参数是条形码容器的选择器，第二个参数是要条形码的文本
JsBarcode("#barcode", "Hi!");

node.js端使用

待实验

JsBarcode使用选项

JsBarcode的接口

JsBarcode('元素选择器','格式化文本',选项);

选项

选项	作用	默认值	值类型	说明
format	指定使用的条形码类型	“auto”	String	auto 就是使用CODE128
width	指定条形码中单条竖线的宽度	2	Number	并不是整个条形码的宽度
height	指定条形码高度	100	Number
displayValue	指定是否显示条形码文本	true	Boolean
fontOptions	设置条形码文本的粗体和斜体样式	“”	String	bold / italic / bold italic
font	设置条形码文本的字体	monospace	String
fontSize	设置条形码文本的字体大小	16	Number
textAlign	设置条形码文本的水平对齐方向	center	String	left / center / right
textPosition	设置条形码文本的位置	bottom	String	bottom / top
textMargin	设置条形码文本和条形码间的距离	2	Number	存在bug：当textPosition设置为top时，如果textMargin设置过大会导致条形码文本超出边框而消失或部分显示
background	设置整个条形码容器的背景颜色	#ffffff	String
lineColor	设置条形码及其文本的颜色	#000000	String
margin	设置条形码和条形码文本组合体的外边距	10	Number	设置的并不是整个条形码容器的外边距，反而可以理解成是整个条形码的内边距，也可以单独设置某一个边距，marginTop、marginRight、marginBottom、marginLeft
valid	执行生成条形码过程后的回调函数	function (valid){}	Function	接收一个参数valid，表示条形码生成是否成功，一般是指是否受支持的条形码文本，如果是因为传入不支持的条形码类型会直接报错

JsBarcode的使用相关推荐

html如何生成条形码,前端如何生成条形码---JsBarcode
React 生成条形码代码注:需引入 jsbarcode 插件 import React from 'react'; import JsBarcode from 'jsbarcode'; class ...
vue3.0 + JsBarcode 循环生成多个条形码(setup语法糖)
1.安装jsbarcode npm install jsbarcode --save 2.html页面循环数据 //id动态绑定,使用类名加index <div class='js_barcod ...
JsBarcode：JS条形码生成
Jquery 下载地址:http://www.jq22.com/jquery-info122 JsBarcode 下载地址:http://www.jq22.com/jquery-info15657 & ...
VUE中：printJS使用，附带JsBarcode条码生成器，网页转图片html2canvas，base64上传保存处理，二维码生成库qrcode，二维码/条码扫描识别，domtoimage
官网 JsBarcode官网 JsBarcode的GitHub-WIKI 我的项目需求只需要将配置好的HTML与CSS样式传入进去就好,较为简单. 九个月后html2canvas出现线上问题设置了跨 ...
JS生成条形码/二维码 barcode.js、JsBarcode
JS生成条形码/二维码 barcode.JsBarcode JsBarcode Barcode.js 以下代码均非纯原创.新手小白.网上一搜一大把的概念也不写了,直接上可运行的代码及遇到的小坑. Js ...
vue 条形码--JsBarcode
介绍一下在GitHub生成条形码的js插件→JsBarcode npm install jsbarcode npm install canvas var JsBarcode = require('js ...
vue 项目中生成条形码（jsbarcode）
条形码插件介绍和使用安装: cnpm install jsbarcode --save 引入:在要生成条形码的页面引入即可 import JsBarcode from 'jsbarcode' 3.二 ...
使用JsBarcode生成条形码
引入jquery和JsBarcode.all.js(注意:引入JsBarcode.js无效) github地址:https://github.com/lindell/JsBarcode 代码: < ...
vue JsBarcode 常用参数设置
jsbarcode是一个不依赖任何库/框架的条形码生成库,使用原生JavaScript写成. 安装依赖包 npm install jsbarcode --save 在使用页面引入依赖包 import ...
关于JsBarcode.all.js
Js生成条形码使用方法参考地址: https://github.com/lindell/JsBarcode 下载地址: https://pan.baidu.com/s/1fYgn0wwDII-cHm ...

JsBarcode的使用

说明

JsBarcode是什么

JsBarcode支持的条形码

用法

浏览器端使用

浏览器的支持性

使用步骤

node.js端使用

JsBarcode使用选项

JsBarcode的接口

选项

JsBarcode的使用相关推荐

最新文章

热门文章