Search code examples
javascriptphphtmlcssjsbarcode

jsBarcode svg image not displaying on every printable page HTML Javascript and PHP

I have barcodes of items in a box, I want to print these barcodes on paper two column format, but at the end of of every page I want to print the box barcode. I am using HTML, PHP, Javascript, CSS and jsBarcode library. Everything is working great but I am unable to get the box barcode to print at the bottom of every page.

See below HTML, Javascript and PHP code.

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

<?php

//Serial of items on a box, these serials will be printed in two column format on a white paper.

$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";

//A box with serial number that contains several barcoded items, this box barcode will be printed at the bottom of every page.

$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>

As you can see above, I am using footer class to make sure footer's svg barcode image and text is printed at the bottom of every page (I am printing the pages from web browser CTRL+P. I can see footer text on every printed page, but for some reasons svg only prints on the last page and is missing from every other page. See below the CSS I am using.

/* 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;  /* This creates two columns */
    column-gap: 30px; /* Space between columns */
    padding: 20px;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Optional: Make sure to handle any breaks properly */
.content p {
    break-inside: avoid;  /* Prevents paragraphs from breaking between columns */
    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 styles for print */
    .container {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    /* Content styles for print */
    .content {
        column-count: 2;
        column-gap: 30px;
    /*    break-inside: avoid; */
    }

    /* Footer should appear at the bottom of every page */
    .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; /* Ensures footer appears on each page */
    }

    /* Add page margins */
    @page {
        margin: 20mm;
    }

    /* Ensure content and footer are handled properly in printing */
    .content p {
        page-break-inside: avoid;
    }
}

/* Responsive design for screen view: One column for small screens */
@media (max-width: 768px) {
    .content {
        column-count: 1;  /* One column for smaller screens */
    }
}

I have spent 6 hours trying various methods, but I have not had success. I just want to print the box barcode label at the bottom of every printed page. I am printing the pages by using CTRL+P from web browser. Thanks in advance.

Solution

  • I tested with several image options in the footer. The issue seems to be with embedding the <svg> tag in the footer. If you use the <svg> tag it is not working. But if you use the <img> tag with the svg image url in the src attribute it will work.

    JsBarcode also supports using the <img> tag. The generated barcode will be embedded as a data url in the image tag. And this image will be printed properly in footer in all the pages. So use <img> tag instead of <svg> to add the barcode.

    Your footer code:

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

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

    </div>";

    Check this print preview showing the barcode in footer in all the pages:

    Barcode appearing in footer in all the pages