使用JsBarcode生成条码后无法打印img标签的问题求助

问题原因 #

1. 渲染时机偏差：原代码直接打开img.src时，JsBarcode可能还未完成条码渲染，导致新窗口加载的是空白或无效图片源。
2. 新窗口内容缺失：仅打开图片URL的方式缺少完整文档结构和样式，易导致打印时图片无法正确显示。
3. 语法错误：jQuery引入标签未闭合，可能引发脚本加载失败（虽JsBarcode可独立运行，但修复后避免潜在问题）。

解决方案 #

通过以下步骤修正代码：

• 确保条码渲染完成后再获取有效图片源
• 在新窗口中构建完整HTML文档，包含条码图片和基础样式，保障打印效果
• 正确触发新窗口的打印事件

修正后的完整代码 #

<form class="row g-3 mt-5 mb-5 p-5">
    <div class="col-auto">
        <label for="inputPassword2" class="visually-hidden">Password</label>
        <input type="text" class="form-control" id="inputPassword2" placeholder="Password">
    </div>
    <div class="col-auto">
        <button type="button" onclick="generatebar()" class="btn btn-primary mb-3">Generate barcode</button>
    </div>
</form>

<div class="barcode_content" style="width: 38mm; height: 25mm;">
    <p>Title of Barcode </p>
    <img id="barcode_id" />
</div>

<script src="assets/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/JsBarcode.all.min.js"></script>
<script>
function generatebar() {
    var sdeec = document.getElementById('inputPassword2').value;
    const barcodeImg = document.getElementById('barcode_id');

    // 生成条码
    JsBarcode(barcodeImg, sdeec, {
        format: "CODE39",
        width: 1,
        height: 40,
        font: "monospace",
        displayValue: false,
        lineColor: "#000000"
    });

    // 获取渲染完成后的条码图片源
    const barcodeSrc = barcodeImg.src;
    if (!barcodeSrc) return;

    // 创建新窗口并写入完整HTML结构
    const pwin = window.open("", "_blank");
    pwin.document.write(`
        <html>
            <head>
                <style>
                    body { margin: 0; padding: 20px; text-align: center; }
                    img { max-width: 100%; height: auto; }
                </style>
            </head>
            <body>
                <p>Title of Barcode</p>
                <img src="${barcodeSrc}" />
            </body>
        </html>
    `);
    pwin.document.close(); // 关闭文档流以触发onload事件

    // 新窗口加载完成后执行打印
    pwin.onload = function() {
        this.print();
        // 可选：打印完成后自动关闭窗口
        // setTimeout(() => this.close(), 500);
    };
}
</script>

关键修改点 #

• 修复jQuery引入标签的闭合错误
• 先获取渲染完成后的条码图片源，确保新窗口加载有效内容
• 在新窗口中构建完整HTML文档，添加基础样式保证图片正常显示
• 调用document.close()完成文档写入，确保onload事件正确触发
• 使用新窗口自身的print()方法，避免作用域混淆

内容的提问来源于stack exchange，提问作者Harish Sharma