首页 >  vue代码 >  vue 使用QRCode生成二维码

vue 使用QRCode生成二维码

时间:2023-12-26

前端使用QRCode插件能够方便的将链接生成二维码图片。比如微信支付、网站链接等情景,前端可以直接使用此插件将链接生成二维码图片:

一、下载

yarn add qrcode;//安装

import QRCode from "qrcode"; //引入生成二维码插件

export default {

        components: {

          QRCode,
   
       },

}

二、使用

  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);


    },