大家好,我是前端实验室的大师兄！
二维码和条形码在我们日常生活中可以说是处处可见，我们已经离不开他们了，无论是健康宝行程码，还是购物支付公交车
我们无时无刻不在使用，但是不知道各位程序员老爷们在程序中有没有生成过二维码呢？今天大师兄就带给大家一个生成二维码条形码的神器
二维码
qrcode 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。
二维码是在一个正方形的框中填充各种点点或无规则小图形块而构成的图形，这种称之为二维码，他与一维码最大的区别就是存储容量大很多，而且保密性好。
二维码本质上表现给大家的就是一个静态图片，其实是包含特字加密算法的图形，里面存储的是一串字符串（即字母、数字、ASCII码等），这说明二维码不仅存储量大，而且存储的内容很广泛，数字、字母、汉字等都可以被存储。
安装使用
安装
代码语言：javascript复制npm install qrcode --save-dev
使用
代码语言：javascript复制<canvas id="qrcode"></canvas>
// 引入
import QRCode from "qrcode";
// 创建二维码方法
const createQrcode = (value, elemTarget) => {
QRCode.toCanvas(document.querySelector(elemTarget), value);
};
//传入二维码的内容
createQrcode("#qrcode", "这里是前端实验室");
条形码
jsbarcode 是一个用于生成条形码的js库
条形码是日常生活中比较常见的，主要用于商品。通俗的理解就是一串字符串的集合（含字母、数字及其它ASCII字符的集合应用），常用来标识一个货品的唯一性，当然还有更多更深入与广泛的应用，像超市的商品、衣服、微信、支付宝、小程序等到处都有条形码的广泛应用
安装使用
安装
代码语言：javascript复制npm install jsbarcode --save-dev
使用
代码语言：javascript复制// 创建一个节点
<canvas id="canvas"></canvas>
// 引入
import JsBarcode from 'jsbarcode';
// 创建一个生成条形码的方法
getBarcode() {
// 设置一些参数
let options = {
text: "123456789",
displayValue: true,
fontSize: 12,
height: 40,
width: 1,
};
this.$nextTick(() => {
JsBarcode("#canvas", "987654321", options);
//#canvas 对应容器中的id
//987654321 是条形码的携带的信息，和option中的text显示信息要区分
//options:是条形码的配置信息
});
},
还有一种方式是在节点元素里传入参数：
代码语言：javascript复制<template>
<div>
<svg
class="barcode"
jsbarcode-format="upc"
:jsbarcode-value="value"
jsbarcode-fontoptions="bold"
>
</svg>
</div>
</template>
<script>
import JsBarcode from 'jsbarcode';
export default {
data() {
return {
value: '123456789012'
}
},
mounted(){
this.getBarcode();
getBarcode.getBarcode("barcode").init();
},
}
</script>
二维码：https://www.npmjs.com/package/qrcode 条形码：https://www.npmjs.com/package/jsbarcode
最后
欢迎加入前端实验室读者交流群，群里有不少技术大神，不定时会分享一些技术要点，更有一些资源收藏爱好者会分享一些优质的学习资料。吃瓜、摸鱼、白嫖技术就等你了~
进群方式：在下方公众号后台，回复 111 ，按提示操作即可进群。
