【前端vue生成二维码和条形码——MQ】

---

前端vue生成二维码和条形码——MQ

一、安装所需要的库

1、安装qrcode

1.1 使用npm安装脚本

npm install qrcode --save

2、安装jsbarcode

2.1 使用npm安装脚本

npm install jsbarcode --save

二、使用步骤

1、二维码生成

<script setup>
import QRCode from 'qrcode'
// 生成二维码的函数
const generateQRCode = (text) => {const dom = document.querySelector('#qrcodeCanvas');if (dom) {QRCode.toCanvas(dom, text, {width: 200,  // 二维码宽度 定位pxmargin: 2,   // 外边距}, (error) => {if (error) {console.error(error);} else {console.log('二维码创建成功');}});}
};</script><template><button @click="generateQRCode('https://blog.csdn.net/weixin_42588676')">生成二维码</button><!-- 用于显示二维码 --><canvas id="qrcodeCanvas"></canvas></template><style scoped></style>

2、条形码生成

<script setup>
import JsBarcode from 'jsbarcode'
// 生成条形码(code128)的函数
const generateBarcode = (text) => {const dom = document.querySelector(`#svg-barcode`);if (dom) {JsBarcode(dom, text, {format: 'CODE128', // 条形码格式，可以是 'EAN13', 'EAN8', 'CODE128', 'UPC', 'pharmacode'等等lineColor: '#000', // 条形码颜色width: 3, // 每个条形的宽度height: 100, // 条形码的高度displayValue: false, // 是否显示文本fontSize: 18, // 字体大小margin: 10, // 增加边距});}
};
</script><template><button @click="generateBarcode('5201314')">生成条形码</button><!-- 用于显示条形码的svg 这里必须是用svg 用canvas会很小而且扫描不好--><svg style="width: 630rpx; height: 134rpx;margin-top: 20rpx" :id="`svg-barcode`"></svg></template><style scoped></style>

--------------------------------------------------------------------------------------------------------------------------------------------

至此，大功告成！