Изображение JSBarcode SVG не отображается на каждой печатной странице HTML JavaScript и PHP ⇐ CSS

[Anonymous]

У меня есть штрих -коды элементов в коробке, я хочу распечатать эти штрих -коды на бумаге два формата столбца, но в конце каждой страницы я хочу распечатать штрих -код коробки. Я использую HTML, PHP, JavaScript и JSBarcode Library. Все работает отлично, но я не могу заставить штрих -код коробки для печати в нижней части каждой страницы.








< /code>
Как вы можете видеть выше, я использую класс нижнего колонтитула, чтобы убедиться, что нижний колонтитул виден на каждой странице для печати. Я вижу тело текст на каждой печатной странице, но по некоторым причинам SVG печатает только на большой странице и отсутствует на каждой другой странице.
См. Ниже CSS, который я использую. < /P>
/* 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 */
}
}

< /code>
Я попробовал поиск в Google и попробовал ИИ, а также попробовал почти все доступные методы, и я потратил почти 6 часов, но я не могу заставить его работать. Поэтому я решил, что StackOverflow может определенно помочь, поэтому я здесь ищу вашу помощь.
заранее спасибо и очень ценен. < /P>

Подробнее здесь: https://stackoverflow.com/questions/793 ... ript-and-p