Hello，我是apipi，玩转前端之二维码生成！
在数字化浪潮中，二维码已成为信息传递的 “神奇钥匙”。今天，我将带你深入了解如何在项目中将后端链接实现前端二维码生成这一实用功能。
代码核心功能剖析
表格中的二维码展示
在表格的二维码列里，我巧妙地运用了 el-image 组件，将存储于 row.qrCodeImage 中的二维码图片数据展示出来。这就好比给每行数据配上了一张专属的 “数字名片”，方便用户快速识别和操作。
二维码弹窗的精妙设计
- 弹窗创建 ：借助
el-dialog组件搭建起二维码弹窗的框架，用来展示和操作二维码。 - 二维码大小选择功能 ：通过
el-select组件为用户提供了一键切换二维码大小的能力，用户可以根据实际需求。
二维码生成的智能逻辑
引入了强大的 QRCode 类来生成二维码，并把这张图片的数据妥善存储在 qrCodeSrc 中，随时等待用户的下一步指令。当用户打开弹窗，根据用户选择的二维码大小，迅速生成对应尺寸的二维码图片。
保存二维码的便捷操作
为了方便用户留存二维码，我们设计了保存功能。利用 a 标签创建下载链接，把二维码图片数据转换成可下载的格式。
创新应用场景拓展
- 电商网站商品信息展示 ：在电商平台上，每个商品详情页都可以嵌入二维码，顾客扫码后可直达商品购买页面，还能获取专属优惠信息，极大地提升购物体验和转化率。
- 线下活动信息传播 ：举办线下活动时，在海报、传单等物料上放置活动专属二维码，参与者扫码即可获取活动详情、报名入口等信息，实现线上线下的高效互动。
- 个人作品集分享 ：对于设计师、摄影师等创意工作者，将作品集链接生成二维码，打印在名片或展示作品上，让别人能快速扫码浏览自己的作品，拓展人脉和展示机会。
代码展示
generateQRCodeForTable(row) {
const url = row.qrCode;
const qrCodeContainer = document.createElement('div');
const width = 50;
const height = 50;
new QRCode(qrCodeContainer, {
text: url,
width: width,
height: height,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.L
});
const canvas = qrCodeContainer.querySelector('canvas');
if (canvas) {
row.qrCodeImage = canvas.toDataURL('image/png');
}
},
generateQRCodeForDialog(url) {
const qrCodeContainer = document.createElement('div');
if (this.qrCodeInstance) {
this.qrCodeInstance.clear();
}
this.qrCodeInstance = new QRCode(qrCodeContainer, {
text: url,
width: this.qrWidth,
height: this.qrHeight,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.L
});
const canvas = qrCodeContainer.querySelector('canvas');
if (canvas) {
this.qrCodeSrc = canvas.toDataURL('image/png');
}
},
saveQRCode() {
if (!this.currentRow || !this.currentRow.qrCodeImage) {
this.$message.error('二维码尚未生成');
return;
}
const a = document.createElement('a');
a.download = `二维码_${this.currentRow.name || '未命名'}.png`;
a.href = this.currentRow.qrCodeImage;
a.click();
},
希望这篇科普文章能帮助你轻松玩转前端二维码生成，如果你对这一功能有更多奇思妙想的应用场景，欢迎随时和我交流探讨哦！
