使用EasyQRCodeJS下载SVG格式二维码遇到问题

你的代码核心问题是下载时未获取正确的SVG内容，且数据格式声明错误，导致下载的文件无法被识别。以下是具体问题和修复步骤：

关键错误点 #

• 下载逻辑中var text = QRCode;获取的是插件构造函数对象，而非生成的SVG代码
• 下载用的Data URI类型为text/plain，SVG文件需声明为image/svg+xml才能被正确识别
• 配置项中logoBackgroundColor: '#fffff'少一个字符，应为#ffffff（不影响下载，但会导致logo背景色异常）

修复后的完整代码 #

<script src="https://cdn.jsdelivr.net/npm/easyqrcodejs@4.4.12/dist/easy.qrcode.min.js"></script>
<div id="qrcode"></div>
<input type="button" id="button" value="Download" />

<script>
// Options
var options = {
    text: "https://github.com/ushelp/EasyQRCodeJS",
    width: 200,
    height: 200,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H, // L, M, Q, H
    logo: "https://assets.website-files.com/6130bd1fcd31de20d9599493/627b6e7e75f1c5ef5f36ff22_customjava.svg", 
    logoWidth: 50,
    logoHeight: 50,
    crossOrigin : 'anonymous',
    quietZone: 0,
    quietZoneColor: "rgba(0,0,0,0)",
    drawer: 'svg',
    logoBackgroundColor: '#ffffff', // 修正颜色值字符缺失问题
    logoBackgroundTransparent: false
};

// Create QRCode Object
new QRCode(document.getElementById("qrcode"), options);

function download(filename, svgContent) {
    var element = document.createElement('a');
    // 声明正确的SVG数据类型
    element.setAttribute('href', 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svgContent));
    element.setAttribute('download', filename);

    element.style.display = 'none';
    document.body.appendChild(element);

    element.click();

    document.body.removeChild(element);
}

// 修复下载逻辑，获取生成的SVG内容
document.getElementById("button").addEventListener("click", function(){
    // 找到qrcode容器内的SVG元素，获取完整代码
    var svgElement = document.querySelector('#qrcode svg');
    if (svgElement) {
        var svgContent = svgElement.outerHTML;
        download("qrcode.svg", svgContent);
    }
}, false);
</script>

修复说明 #

1. 获取正确SVG内容：通过document.querySelector('#qrcode svg')定位生成的SVG元素，用outerHTML获取完整的SVG代码
2. 修正Data URI类型：将data:text/plain改为data:image/svg+xml，确保浏览器识别为SVG文件
3. 修复配置项错误：补全logoBackgroundColor的颜色值字符，避免logo背景色异常

内容的提问来源于stack exchange，提问作者Juan-man