二维码库的选择前端生成二维码的库挺多的我们用的是qrcode这个npm包star数比较多维护也比较活跃。npm install qrcode项目里的版本是1.5.4。基本用法二维码生成非常简单import QRCode from qrcode; QRCode.toDataURL(https://example.com).then(url { console.log(url); // base64格式的图片数据 });在我们的项目里二维码生成是在支付场景下用的。用户选择充值套餐后后端返回一个支付链接前端把这个链接转成二维码显示template el-dialog title支付二维码 :visible.syncopenWeixinCode div classpayPrice {{ rechargeList[activeRecharge].price }}/div el-image :srcorderInfo.url fitcontain classwxCode/el-image div classpayTip请使用微信扫一扫扫描二维码完成支付/div /el-dialog /template script import QRCode from qrcode; export default { methods: { handlePay() { buyRechargePower(this.rechargeList[this.activeRecharge].id).then(res { QRCode.toDataURL(res.data.url).then(url { this.orderInfo.url url; this.openWeixinCode true; // 轮询支付状态 this.timer setInterval(() { this.getEnOrderStatus(); }, 2000); }); }); } } } /script第一个坑二维码太复杂扫不出来一开始生成的二维码特别复杂感觉密密麻麻全是点手机扫码很难识别。后来查了一下文档发现可以通过errorCorrectionLevel参数调整容错率QRCode.toDataURL(url, { errorCorrectionLevel: L // L、M、Q、H容错率从低到高 }).then(url { // ... });容错率越高二维码越复杂但越抗污损。对于我们的场景线上扫码显示在手机屏幕上选L级别就够了二维码会简洁很多扫码速度快很多。第二个坑二维码尺寸和清晰度默认生成的二维码分辨率不太高在高清屏上有点模糊。可以设置width参数QRCode.toDataURL(url, { width: 300, // 宽度单位是像素 margin: 2, // 边距留白区域 color: { dark: #000000, // 二维码颜色 light: #FFFFFF // 背景颜色 } }).then(url { // ... });这里有个坑width设置太大base64字符串会非常长可能会超出浏览器localStorage的长度限制。一般300-400就够用了。打印适配名片是要打印的所以二维码在打印时的效果很重要。我们用的是html2canvas把整个名片转成图片然后打印。这里有几个要注意的点1. 设置合适的DPI打印用的图片分辨率要比屏幕显示的高。我们是在生成名片的时候整体放大2倍import html2canvas from html2canvas; html2canvas(element, { scale: 2, // 2倍分辨率 useCORS: true, // 支持跨域图片 backgroundColor: #ffffff }).then(canvas { // canvas转图片... });2. 二维码大小要合适名片尺寸通常是90mm × 54mm二维码占的比例不能太大否则扫的时候距离要拉得很远也不能太小否则打印出来不清楚。我们测试下来二维码宽度在名片总宽度的30%-40%比较合适。比如名片宽度360px二维码大概120-140px。3. 考虑留白二维码周围要留点白边不然打印出来边缘被裁了可能就扫不出来了QRCode.toDataURL(url, { margin: 2, // 至少留2个模块的边距 // ... });下载二维码图片有时候用户想单独下载二维码图片可以直接用base64转blob下载function downloadQRCode(text, filename) { QRCode.toDataURL(text).then(url { const link document.createElement(a); link.href url; link.download filename || qrcode.png; link.click(); }); }或者配合file-saver库import { saveAs } from file-saver; QRCode.toBlob(text).then(blob { saveAs(blob, qrcode.png); });实时刷新支付状态二维码生成后要轮询后端接口看用户有没有支付成功handlePay() { buyRechargePower(this.rechargeList[this.activeRecharge].id).then(res { this.orderInfo res.data; QRCode.toDataURL(res.data.url).then(url { this.orderInfo.url url; this.openWeixinCode true; // 每2秒查询一次支付状态 this.timer setInterval(() { this.getEnOrderStatus(); }, 2000); }); }); }, getEnOrderStatus() { getEnOrderStatus(this.orderInfo.orderId).then(res { if (res.data.status 1) { // 支付成功清除定时器 if (this.timer) { clearInterval(this.timer); } this.$message.success(支付成功); this.openWeixinCode false; this.$emit(RechargeSuccess); } }); }这里要注意的是组件销毁的时候一定要清除定时器beforeDestroy() { if (this.timer) { clearInterval(this.timer); } }一些小技巧1. 二维码加Logo可以在生成的二维码中间加个小Logo不过要注意Logo不能太大一般占二维码面积的15%-20%Logo颜色要和二维码有对比度最好用白色边框把Logo围起来这个qrcode库本身不支持加Logo得自己处理canvas。我们项目暂时没这个需求就没做。2. 批量生成如果需要批量生成二维码记得用Promise.all并行处理const urls [url1, url2, url3]; Promise.all(urls.map(url QRCode.toDataURL(url))).then(results { console.log(results); // 三张二维码的base64 });3. 打印预览打印前最好给用户一个预览功能确认效果没问题再打印。浏览器有原生打印APIwindow.print();配合CSS的media print可以控制打印时的样式media print { .no-print { display: none; } .qrcode-container { page-break-inside: avoid; } }总结二维码功能虽然看起来简单但真要做好细节还挺多的容错率要选对根据使用场景调整别一味追求高容错尺寸要合适屏幕显示和打印的尺寸要求不一样要分别优化打印效果要测试别光看屏幕上的效果打印出来看看实际效果定时器要清理轮询类的代码一定要在组件销毁时清除定时器
二维码生成器：从前端到打印的全流程
二维码库的选择前端生成二维码的库挺多的我们用的是qrcode这个npm包star数比较多维护也比较活跃。npm install qrcode项目里的版本是1.5.4。基本用法二维码生成非常简单import QRCode from qrcode; QRCode.toDataURL(https://example.com).then(url { console.log(url); // base64格式的图片数据 });在我们的项目里二维码生成是在支付场景下用的。用户选择充值套餐后后端返回一个支付链接前端把这个链接转成二维码显示template el-dialog title支付二维码 :visible.syncopenWeixinCode div classpayPrice {{ rechargeList[activeRecharge].price }}/div el-image :srcorderInfo.url fitcontain classwxCode/el-image div classpayTip请使用微信扫一扫扫描二维码完成支付/div /el-dialog /template script import QRCode from qrcode; export default { methods: { handlePay() { buyRechargePower(this.rechargeList[this.activeRecharge].id).then(res { QRCode.toDataURL(res.data.url).then(url { this.orderInfo.url url; this.openWeixinCode true; // 轮询支付状态 this.timer setInterval(() { this.getEnOrderStatus(); }, 2000); }); }); } } } /script第一个坑二维码太复杂扫不出来一开始生成的二维码特别复杂感觉密密麻麻全是点手机扫码很难识别。后来查了一下文档发现可以通过errorCorrectionLevel参数调整容错率QRCode.toDataURL(url, { errorCorrectionLevel: L // L、M、Q、H容错率从低到高 }).then(url { // ... });容错率越高二维码越复杂但越抗污损。对于我们的场景线上扫码显示在手机屏幕上选L级别就够了二维码会简洁很多扫码速度快很多。第二个坑二维码尺寸和清晰度默认生成的二维码分辨率不太高在高清屏上有点模糊。可以设置width参数QRCode.toDataURL(url, { width: 300, // 宽度单位是像素 margin: 2, // 边距留白区域 color: { dark: #000000, // 二维码颜色 light: #FFFFFF // 背景颜色 } }).then(url { // ... });这里有个坑width设置太大base64字符串会非常长可能会超出浏览器localStorage的长度限制。一般300-400就够用了。打印适配名片是要打印的所以二维码在打印时的效果很重要。我们用的是html2canvas把整个名片转成图片然后打印。这里有几个要注意的点1. 设置合适的DPI打印用的图片分辨率要比屏幕显示的高。我们是在生成名片的时候整体放大2倍import html2canvas from html2canvas; html2canvas(element, { scale: 2, // 2倍分辨率 useCORS: true, // 支持跨域图片 backgroundColor: #ffffff }).then(canvas { // canvas转图片... });2. 二维码大小要合适名片尺寸通常是90mm × 54mm二维码占的比例不能太大否则扫的时候距离要拉得很远也不能太小否则打印出来不清楚。我们测试下来二维码宽度在名片总宽度的30%-40%比较合适。比如名片宽度360px二维码大概120-140px。3. 考虑留白二维码周围要留点白边不然打印出来边缘被裁了可能就扫不出来了QRCode.toDataURL(url, { margin: 2, // 至少留2个模块的边距 // ... });下载二维码图片有时候用户想单独下载二维码图片可以直接用base64转blob下载function downloadQRCode(text, filename) { QRCode.toDataURL(text).then(url { const link document.createElement(a); link.href url; link.download filename || qrcode.png; link.click(); }); }或者配合file-saver库import { saveAs } from file-saver; QRCode.toBlob(text).then(blob { saveAs(blob, qrcode.png); });实时刷新支付状态二维码生成后要轮询后端接口看用户有没有支付成功handlePay() { buyRechargePower(this.rechargeList[this.activeRecharge].id).then(res { this.orderInfo res.data; QRCode.toDataURL(res.data.url).then(url { this.orderInfo.url url; this.openWeixinCode true; // 每2秒查询一次支付状态 this.timer setInterval(() { this.getEnOrderStatus(); }, 2000); }); }); }, getEnOrderStatus() { getEnOrderStatus(this.orderInfo.orderId).then(res { if (res.data.status 1) { // 支付成功清除定时器 if (this.timer) { clearInterval(this.timer); } this.$message.success(支付成功); this.openWeixinCode false; this.$emit(RechargeSuccess); } }); }这里要注意的是组件销毁的时候一定要清除定时器beforeDestroy() { if (this.timer) { clearInterval(this.timer); } }一些小技巧1. 二维码加Logo可以在生成的二维码中间加个小Logo不过要注意Logo不能太大一般占二维码面积的15%-20%Logo颜色要和二维码有对比度最好用白色边框把Logo围起来这个qrcode库本身不支持加Logo得自己处理canvas。我们项目暂时没这个需求就没做。2. 批量生成如果需要批量生成二维码记得用Promise.all并行处理const urls [url1, url2, url3]; Promise.all(urls.map(url QRCode.toDataURL(url))).then(results { console.log(results); // 三张二维码的base64 });3. 打印预览打印前最好给用户一个预览功能确认效果没问题再打印。浏览器有原生打印APIwindow.print();配合CSS的media print可以控制打印时的样式media print { .no-print { display: none; } .qrcode-container { page-break-inside: avoid; } }总结二维码功能虽然看起来简单但真要做好细节还挺多的容错率要选对根据使用场景调整别一味追求高容错尺寸要合适屏幕显示和打印的尺寸要求不一样要分别优化打印效果要测试别光看屏幕上的效果打印出来看看实际效果定时器要清理轮询类的代码一定要在组件销毁时清除定时器
