使用jsBarcode生成的箱码SVG无法在每一页打印页底部显示的问题求助

我现在遇到一个打印排版的棘手问题，希望各位能帮忙出出主意：我需要把箱子里的商品条码以两列格式打印在纸上，并且每一页的底部都要打印箱子的条码。目前我用HTML/PHP/JS配合jsBarcode库实现，大部分功能都正常，但箱子的SVG条码只在最后一页显示，其他页面的底部只有文字，条码完全消失了。

我先把我的代码贴出来，麻烦大家帮我找找问题所在：

前端+PHP代码 #

<html>
<script type="text/javascript" src="/js/JsBarcode.all.min.js"></script>
<link rel="stylesheet" href="paperprint.css">

<?php
// 箱子里的商品序列号，将以两列格式打印在纸上
$serials = "PF16ESE8|PF1E0BK0|PF15WQ5X|PF15XRVF|PF16DT72|PF0WXFYE|PF0WKT6C|PF0WY3QL|PF0WJXYE|PF15WP74|PF15TRQ2|PF0MKW31|PF0WXE6Y|PF0MPP6W|PF0KU1SC|PF0MKXME|PF0A61TR|PF0M0Q28|PF0MPMMG|PF0MKW3Y|PF0M0R9R|PF0M0RDY|PF160JM4|PF08SPWH|PF15W1WY|PF15RJHA|PF0VECS0|PF0AX7AA|PF0WY619|PF0M2RZA|PF0VETD4|PF0MH82G|PF0910GF|PF16ESC1|PF0A07S6|PF0MZ3BN";

// 箱子自身的序列号，需要打印在每一页的底部
$box = "100000002";

$serialarray = explode('|', $serials);
echo '    <div class="container">';
echo '  <div class="content">';

foreach ($serialarray as $bar) {
        echo "<svg id=\"$bar\"></svg><br>";
}

echo "<script>";
foreach ($serialarray as $sbar) {
echo "JsBarcode(\"#$sbar\", \"$sbar\", { height:30 });";
}
echo '</script>        </div></div>';

echo "
    <div class=\"footer\">
<svg id=\"box\"></svg> <p> This is a footer</p> 
<img id=\"image\"></img>  

<script>
JsBarcode(\"#box\", \"$box\", { height:60 });
</script>

    </div>";

?>

</body>

</html>

CSS代码 #

/* Global Styles */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

.container {
    width: 80%;
    margin: 20px auto;
}

/* Two Column Layout */
.content {
    column-count: 2;  /* 实现两列布局 */
    column-gap: 30px; /* 列之间的间距 */
    padding: 20px;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 避免段落跨列断开 */
.content p {
    break-inside: avoid;  
    margin-bottom: 15px;
}

/* Footer Styles */
.footer {
    text-align: center;
    font-size: 12px;
    background-color: #333;
    color: white;
    padding: 10px;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 999;
}

/* Print Styles */
@media print {
    body {
        margin: 0;
    }

    /* 打印时的容器样式 */
    .container {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    /* 打印时的内容样式 */
    .content {
        column-count: 2;
        column-gap: 30px;
    }

    /* 让页脚固定在每一页底部 */
    .footer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: white;
        color: black;
        text-align: center;
        font-size: 12px;
        padding: 10px;
        page-break-before: always;
    }

    /* 设置页面边距 */
    @page {
        margin: 20mm;
    }

    /* 确保内容和页脚的打印排版正常 */
    .content p {
        page-break-inside: avoid;
    }
}

/* 响应式设计：小屏幕下切换为单列 */
@media (max-width: 768px) {
    .content {
        column-count: 1;  
    }
}

我已经花了6个小时尝试各种调整，比如修改CSS的打印规则、调整SVG的渲染方式，但还是没解决问题。现在的情况是用浏览器Ctrl+P打印时，每一页底部都能看到"This is a footer"的文字，但只有最后一页有箱子的条码SVG，其他页面的这个位置完全是空的。有没有大佬知道怎么解决这个问题，让箱子的条码能在每一页底部都正常显示出来？

备注：内容来源于stack exchange，提问作者user2107349