Как обеспечить, чтобы фоновое изображение покрывало всю страницу в PDF-файле, созданном с помощью html2pdf? ⇐ CSS

[Anonymous]

Я использую библиотеку html2pdf в своем приложении Node.js для создания многостраничного PDF-файла из содержимого HTML. Содержимое генерируется динамически и отображается в элементе div #slideContainer. Я хочу установить фоновое изображение, которое покрывает всю страницу (включая области без HTML-содержимого) для каждой страницы PDF-файла.
Текущая настройка
HTML

Код: Выделить всё

Title
Content here...


Generate PDF

CSS

Код: Выделить всё

#slideContainer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center; /* Center slides vertically */
min-height: 100vh; /* Ensure the container takes at least the full height of the viewport */
overflow: auto; /* Allow scrolling if content overflows */
}

.slide {
display: none;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: center; /* Center content vertically */
width: 80%;
max-width: 800px;
background: url("/images/background.jpg") no-repeat center center;
background-size: cover;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin: 20px 0; /* Add some space between slides */
page-break-inside: avoid; /* Avoid page breaks inside slides */
}

JS

Код: Выделить всё

document.getElementById("generatePdfButton").addEventListener("click", () => {
// Temporarily show all slides
slides.forEach((slide) => {
slide.classList.add("active");
});

const pdfContent = document.getElementById("slideContainer");
const options = {
margin: [0.5, 0.5, 0.5, 0.5],
filename: "XXXXX",
image: { type: "jpeg", quality: 0.98 },
html2canvas: { scale: 2, useCORS: true },
jsPDF: { unit: "in", format: "a4", orientation: "landscape" },
pagebreak: { mode: ["avoid-all", "css", "legacy"] },
};

html2pdf()
.set(options)
.from(pdfContent)
.save()
.then(() => {
// Revert slides back to their original state
showSlide(currentSlide);
});
});

Проблема:
Фоновое изображение не покрывает всю страницу PDF-файла. Оно появляется только там, где существует HTML-содержимое, оставляя пустые места на остальной части страницы.
Желаемый результат:
Я хочу, чтобы фоновое изображение охватывать всю страницу (включая области без содержимого HTML) для каждой страницы PDF-файла.


Вопрос:
Как я могу гарантировать, что фоновое изображение покрывает все размеры каждой страницы в созданном PDF-файле с помощью html2pdf? Есть ли способ обойти ограничения html2pdf или я что-то упустил в своей реализации?
Будем признательны за любые рекомендации и примеры!

Подробнее здесь: https://stackoverflow.com/questions/792 ... h-html2pdf