前端vue如何生成二维码

最新推荐文章于 2024-08-09 13:40:51 发布

R-sz

最新推荐文章于 2024-08-09 13:40:51 发布

阅读量1.3k

点赞数 3

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_42759398/article/details/138318802

版权

有时候有需要链接直接生成二维码在手机上看的需求，比如下载，比如信息，比如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秒后执行下载操作

};

最终结果