VUE-链接生成二维码-qrcode

安装

npm install qrcode-svg --save

使用实例 – svg

<div v-html="qrCodeSvg.outerHTML"></div>

import QRCodes from  qrcode-svg ;  

const qrCodeSvg = ref(  )

// 生成二维码  
const generateCodeSvg = (link, text) => {  
    // 创建二维码实例并设置尺寸为88x88  
    var qrcode = new QRCodes({  
        content: link,  
        width: 88,  
        height: 88,  
        container:  svg-viewbox ,  
        color:  #000 ,  
        background:  #ffffff ,  
        join: true,
    });  
    var svg = qrcode.svg();  
    const div = document.createElement( div );  
    div.innerHTML = svg;  
    var textEle = div.lastElementChild;  

    // 嵌入品牌标识
    var svgimg = document.createElementNS(
        "http://www.w3.org/2000/svg",
        "image"
    );
    svgimg.setAttributeNS(null, "height", "40");
    svgimg.setAttributeNS(null, "width", "40");
    svgimg.setAttributeNS(
        "http://www.w3.org/1999/xlink",
        "href",
        "https://image.zhihuishu.com/zhs_yufa_150820/b2cm/base1/202401/eba49c4a34f643ec9538380ebd8358e9.png"
    );
    svgimg.setAttributeNS(null, "x", "8");
    svgimg.setAttributeNS(null, "y", "8");
    textEle.appendChild(svgimg);

    // 调整SVG尺寸属性  
    textEle.setAttribute( width ,  88 );  
    textEle.setAttribute( height ,  88 );  
    textEle.setAttribute( viewBox ,  0 0 88 88 );  
    return textEle;  
};  
qrCodeSvg.value = generateCodeSvg( https://example.com ,  测试文本 );  
console.log(qrCodeSvg.value.outerHTML); // 为 svg 标签

其它生成二维码工具 移动端/PC端
uQRCode 中文文档
参考文档
qrcode库的详细使用 – 掘金