'> 背景：根据项目需求根据后端提供的设备编号生成对应的条形码，并点击下载按钮，把条形码图片和excel表打包下载。这篇文章就分享一下制作条形码和二维码的用法。
一、生成条形码
// JsBarcode （DOM标签，扫码后显示的内容, {配置}）
JsBarcode("#imgcode", "123", {
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的条形码支持：
| 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 |
如果不知道条形码使用时候的码制是什么，那选'CODE128'就对了
1.项目安装 jsbarcode 依赖
npm i jsbarcode --save
2.在所需组件模块中导入
import JsBarcode from 'jsbarcode'
3.template部分
<img
id="barcode"
width="185"
height="100"
:src="item.barcodeNo"/>
4.js部分
...
JsBarcode('barcode', 'K神是自封的神', {
format: 'auto',
lineColor: '#000',
background: '#f2f2f2',
width: 1,
height: 50,
text: '努力没用?'
})
...
实现效果：
二、生成二维码
1.项目安装 jsbarcode 依赖
npm i qrcodejs2 --save
2.导入
import QRCode from 'qrcodejs2'
3.template部分
<div>
<button style="cursor: pointer" @click="handleQRCode">点击生成二维码</button>
<div id="qrCode" ref="qrCode"></div>
</div>
4.JS部分
methods: {
handleQRCode() {
//方法1： 使用dom标签生成
new QRCode(document.getElementById("qrCode"), {
text: '方法1', //二维码内容
width: 150, // 二维码的宽
height: 150, //二维码的高
colorDark: "#333", //二维码的颜色
colorLight: "#fff", //二维码的背景色
correctLevel: QRCode.CorrectLevel.L, //容错率, L/M/H
})
//方法2： 使用ref
new QRCode(this.$refs.qrCode, {
text: '方法1', //二维码内容
width: 150, // 二维码的宽
height: 150, //二维码的高
colorDark: "#333", //二维码的颜色
colorLight: "#fff", //二维码的背景色
correctLevel: QRCode.CorrectLevel.L, //容错率, L/M/H
})
}
}
5.效果
