如何将JsBarcode生成的条码导出为SVG或PNG而非PDF？

问题说明 #

当前使用JsBarcode生成条码后，点击原有打印按钮会以PDF形式输出，需改为直接导出SVG或PNG格式文件。

解决方案 #

导出SVG #

JsBarcode生成的条码本身就是SVG元素，直接提取其XML内容即可生成可下载文件：

• 获取SVG元素的完整XML代码
• 将内容转为Blob对象
• 创建下载链接并触发浏览器下载

导出PNG #

需要先将SVG转换为Canvas，再导出为PNG图片：

• 创建与SVG尺寸匹配的Canvas元素
• 将SVG内容转为Data URL并加载为图片
• 将图片绘制到Canvas上，再导出为PNG格式

修改后的完整代码 #

HTML代码 #

<input class="form-control" type="text" placeholder="输入条码内容">
<svg class="hidden" id="barcode" width="100" height="100"></svg>
<button class="btn btn-outline-danger">生成条码</button>
<button class="btn btn-outline-success" onclick="exportAsSVG()">导出SVG</button>
<button class="btn btn-outline-success" onclick="exportAsPNG()">导出PNG</button>

<script src="jsBarcode.code128.min.js"></script>
<script src="index.js"></script>

JavaScript代码 #

document.querySelector("button").addEventListener("click", function() {
    var text = document.querySelector("input").value;
    JsBarcode("#barcode", text);
    document.getElementById("barcode").classList.remove("hidden");
});

// 导出SVG函数
function exportAsSVG() {
    const svgElement = document.getElementById("barcode");
    const svgData = new XMLSerializer().serializeToString(svgElement);
    const blob = new Blob([svgData], {type: "image/svg+xml;charset=utf-8"});
    const url = URL.createObjectURL(blob);
    
    const downloadLink = document.createElement("a");
    downloadLink.href = url;
    downloadLink.download = "barcode.svg";
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
    URL.revokeObjectURL(url);
}

// 导出PNG函数
function exportAsPNG() {
    const svgElement = document.getElementById("barcode");
    const svgData = new XMLSerializer().serializeToString(svgElement);
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    
    // 同步Canvas与SVG的尺寸
    canvas.width = svgElement.getAttribute("width");
    canvas.height = svgElement.getAttribute("height");
    
    const img = new Image();
    img.onload = function() {
        ctx.drawImage(img, 0, 0);
        const pngUrl = canvas.toDataURL("image/png");
        
        const downloadLink = document.createElement("a");
        downloadLink.href = pngUrl;
        downloadLink.download = "barcode.png";
        document.body.appendChild(downloadLink);
        downloadLink.click();
        document.body.removeChild(downloadLink);
    };
    // 将SVG转为Data URL供图片加载
    img.src = "data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(svgData)));
}

注意事项 #

• 若SVG引用了外部资源（如自定义字体），转换PNG时可能出现样式丢失，需确保资源可本地访问
• 如需更高清晰度的PNG，可按比例放大Canvas的宽高尺寸

内容的提问来源于stack exchange，提问作者Mohamed elsamadony