生成条形码(jsbarcode、vue-barcode)
目录
- 一、jsbarcode生成条形码: 用于生成条形码的js库,支持浏览器和node.js
- 二、vue-barcode生成条形码: 是对Jsbarcode条码库的简单包装
一、jsbarcode生成条形码: 用于生成条形码的js库,支持浏览器和node.js
1、安装引用
① 可以通过script标签将jsbarcode包进行引入项目
script src="http://www.jq22.com/jquery/vue.min.js"></script>
<script src='js/JsBarcode.all.min.js'></script>② 使用npm进行安装jsbarcode包,然后通过import进行引入项目
npm install jsbarcode --save
import JsBarcode from 'jsbarcode'
2、使用
① 简单使用
<svg id="jsbarcode1"></svg>
<img id="jsbarcode111" alt="" ref="jsbarcode111">
JsBarcode(document.getElementById('jsbarcode1'), 'this is jsbarcode1')
JsBarcode(this.$refs.jsbarcode111, 'this is jsbarcode111')② 使用jQuery
<a id="jsbarcode2"></a>
// $('#jsbarcode2').JsBarcode('this is jsbarcode3')③ 复杂使用
<canvas id="jsbarcode3"></canvas>
JsBarcode(document.getElementById('jsbarcode3'), 'this is jsbarcode', {format: 'CODE39', // 选择要使用的条形码类型width: 3, // 设置条之间的宽度height: 100, // 设置条的高度displayValue: true, // 是否在条形码下显示文字text: '432432', // 覆盖显示的文本fontOptions: 'bold italic', // 字体加粗 斜体font: 'fantasy', // 设置文本字体textAlign: 'left', // 设置文本的水平对齐方式textPosition: 'top', // 设置文本的垂直位置textMargin: 5, // 设置条形码和文本的距离fontSize: 15, // 设置文本的大小background: '#f00', // 设置条形码的背景lineColor: '#0f0', // 设置条和文本的颜色margin: 15 // 设置条形码周围的空白边距
})④ 链式使用
<img id="jsbarcode4" alt="" ref="jsbarcode3">
JsBarcode(document.getElementById('jsbarcode4'))
.options({ font: 'OCR-B' }) // Will affect all barcodes
.EAN13('1234567890128', { fontSize: 18, textMargin: 0 })
.blank(20) // Create space between the barcodes
.EAN5('12345', { height: 85, textPosition: 'top', fontSize: 16, marginTop: 15 })
.render()⑤ 组件式使用
<svg id="jsbarcode5" jsbarcode-format="UPC" jsbarcode-value="123456789012" jsbarcode-textmargin="0" jsbarcode-fontoptions="bold"></svg>
JsBarcode(document.getElementById('jsbarcode5')).init()
3、以上代码生成的条形码效果如图:
4、jsbarcode支持的条形码有:
5、浏览器支持性
6、jsbarcode详细使用请点击这里
二、vue-barcode生成条形码: 是对Jsbarcode条码库的简单包装
1、安装引用
npm install vue-barcode--save
2、使用
<vue-barcode:value="value"margin-right="5"line-color="#0f0"display-value="432141243"font="bold"margin-left="5"text-margin="10"text-position="bottom"width="1"ean128="ean128"text="this is VueBarcode1111"height="50"margin-top="10"margin="10"margin-bottom="20"text-align="right"font-size="20"background="#f00">不支持vue-barcode</vue-barcode>import VueBarcode from 'vue-qrcode'export default{components: { VueBarcode },data () {return {value: 'this is VueBarcode' //条形码内容}},
}
3、更多options配置请点击这里进行查询
生成条形码(jsbarcode、vue-barcode)相关推荐
- html如何生成条形码,前端如何生成条形码---JsBarcode
React 生成条形码代码 注:需引入 jsbarcode 插件 import React from 'react'; import JsBarcode from 'jsbarcode'; class ...
- vue中生成条形码(jsbarcode)、二维码(qrcodejs2)
1.条形码插件jsbarcode 安装:npm install jsbarcode --save 引入:在需要生成条形码的页面引入即可 import JsBarcode from 'jsbarcode ...
- php tp5生成条形码,thinkPHP框架实现生成条形码的方法
这篇文章主要介绍了thinkPHP框架实现生成条形码的方法,结合实例形式分析了thinkPHP结合第三方barcode类文件生成条形码的相关操作技巧,需要的朋友可以参考下 本文实例讲述了thinkPH ...
- JS生成条形码/二维码 barcode.js、JsBarcode
JS生成条形码/二维码 barcode.JsBarcode JsBarcode Barcode.js 以下代码均非纯原创.新手小白.网上一搜一大把的概念也不写了,直接上可运行的代码及遇到的小坑. Js ...
- vue 项目中生成条形码(jsbarcode)
条形码插件介绍和使用 安装: cnpm install jsbarcode --save 引入:在要生成条形码的页面引入即可 import JsBarcode from 'jsbarcode' 3.二 ...
- vue生成条形码和二维码并打印
文章目录 前言 一.生成条形码 二.生成二维码 三.效果图 四.打印 前言 最近有一个需求,需要将产品信息生成标签,每个信息生成一个条形码,拿到所有数据生成二维码,最后打印标签. 一.生成条形码 使用 ...
- pHp封装成vue,vue.js生成条形码的方法
本文主要和大家分享vue.js生成条形码的方法,主要以代码的形式和大家分享,希望能帮助到大家. 1.下载插件npm install @xkeshi/vue-barcode //下载条形码插件 2.在m ...
- vue遇到的生成条形码和打印问题的汇总
安装插件 1.条码生成 a.下载插件:npm install jsbarcode --save b.< script >引入插件:import JsBarcode from 'jsbarc ...
- 使用JsBarcode生成条形码
引入jquery和JsBarcode.all.js(注意:引入JsBarcode.js无效) github地址:https://github.com/lindell/JsBarcode 代码: < ...
- vue 生成条形码、二维码
条形码 1.安装 cnpm install jsbarcode --save 2.引入 import JsBarcode from 'jsbarcode' 3.二维码容器 <svg id=&qu ...
最新文章
- java条件查询excel_[转]EXCEL中的多条件查询(整理)
- Python的隐藏功能
- c# 写入xml 怪异的事情
- Docker中部署mysql后SpringBoot连接时提示表不存在(修改表名忽略大小写)
- f-measure[转]
- 【风马一族_xml】xmlp之dtd1
- Django视图层:视图函数、视图类
- 辗转相除法 两个数的最大公约数
- mysql 重启爆红,MySQL 启动报错
- 三码合一方法 制作QQ、微信、支付宝收款码合一
- 安川e1000中文说明书_安川E1000变频器维修故障代码说明书
- 前端高级进阶13本经典书籍
- 纹理(Textures)
- 【分析】魔兽争霸3的MPQ文件及模型格式分析
- 装完虚拟机后键盘无法使用
- 基因表达相关性——笔记
- [Nginx] 配置Nginx绑定域名、代理端口
- access偏移注入
- FPGA实现按键检测消抖程序
- 手把手教你写《雷神》游戏(四)