vue 使用QRCode生成二维码

最新推荐文章于 2024-04-16 11:21:47 发布

梦想的颜色

最新推荐文章于 2024-04-16 11:21:47 发布

阅读量526

点赞数 8

文章标签： java 前端服务器

本文链接：https://blog.csdn.net/qq_17859117/article/details/132702599

版权

使用vue 插件生成二维码，不多说，直接复制即可，例子：

在线图片压缩、处理、生成二维码

1、安装qrcode


yarn add qrcode;//安装


import QRCode from "qrcode"; //引入生成二维码插件
export default {
  components: {
    QRCode,
  },
}

2、使用

直接复制即可，会生成图片并直接下载

getQRcode(urlLink) {
      let opts = {
        errorCorrectionLevel: "L", //容错级别
        type: "image/png", //生成的二维码类型
        quality: 0.3, //二维码质量
        margin: 4, //二维码留白边距
        width: 256, //宽
        height: 256, //高
        text: "", //二维码内容
        color: {
          dark: "#666666", //前景色
          light: "#fff", //背景色
        },
      };
      let imgurl ="";
      QRCode.toDataURL(urlLink, opts, (err, url) => {
        if (err) throw err;
        //将生成的二维码路径复制给data的QRImgUrl
        imgurl = url;
      });
      const downloadElement = document.createElement("a");
      downloadElement.href =  imgurl;
      downloadElement.download = "122.png";
      document.body.appendChild(downloadElement);
      downloadElement.click();
      document.body.removeChild(downloadElement);
    },