前端vue如何生成二维码

R-sz 2024-06-21 14:33:01 阅读 90

有时候有需要链接直接生成二维码在手机上看的需求,比如下载,比如信息,比如excel

下面先引入包

import QRCode from 'qrcode';

然后上代码

// 将res转换成二维码 const qrCodeData = JSON.stringify(res); // 将res转换为字符串作为二维码数据// 生成二维码图片 const qrCodeCanvas = document.createElement('canvas'); QRCode.toCanvas(qrCodeCanvas, "qrCodeData", { width: 200, height: 200 });// 等待一段时间以确保二维码图片生成完成 setTimeout(() => { // 将二维码图片转换为DataURL const qrCodeDataURL = qrCodeCanvas.toDataURL('image/png'); // 创建一个下载链接 const downloadLink = document.createElement('a'); downloadLink.href = qrCodeDataURL; downloadLink.download = 'qrcode.png'; // 下载文件名为qrcode.png // 模拟点击下载链接 downloadLink.click(); }, 1000); // 等待1秒后执行下载操作};

最终结果



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。