Background Color Not Applied on Last Page in PDF Generation

[ajmal-pidilite10]

Helllo @drbeat ,

Description: I am using the html2pdf.js version "0.9.3" library to generate PDFs from dynamic content in my web application. However, I have encountered an issue where the background color is not applied on the last page of the generated PDF when the content does not fill the entire page.

Expected Behavior: I expected the last page of the PDF to have the background color applied, regardless of whether the dynamic content fills the entire page or not.

Actual Behavior: The background color is not being applied to the last page of the PDF when the content does not fully occupy the page. As a result, the last page appears without the desired background color.

Code Snippets:

import html2pdf from "html2pdf.js";

export const getPDF = async (containerID, fileName) => { let opt = { margin: [15, 0, 25, 0], filename: fileName, image: { type: "jpeg", quality: 0.98 }, html2canvas: { scale: 1.1, dpi: 191, removeContainer: true, }, jsPDF: { orientation: "portrait", unit: "px", hotfixes: ["px_scaling"], putOnlyUsedFonts: true, }, }; const contentContainer = document.getElementById(containerID); if (contentContainer) { const pdf = html2pdf() .from(contentContainer) .set(opt) .toPdf() .get("pdf") .then((pdf) => { var totalPages = pdf.internal.getNumberOfPages(); for (let i = 2; i <= totalPages; i++) { console.log(pdf.internal.pageSize.getHeight()); pdf.setPage(i); pdf.setFontSize(10); pdf.setTextColor("#000"); pdf.text( i + " of " + totalPages, pdf.internal.pageSize.getWidth() - 410, pdf.internal.pageSize.getHeight() - 20, { align: "center", } ); } }); return pdf.outputPdf("blob", fileName); } };

export const generatePDF = async (containerID, quotationName) => { try { const pdfBlob = await getPDF(containerID, ${quotationName}.pdf); return new File([pdfBlob], ${quotationName}.pdf, { type: "application/pdf", }); } catch (error) { console.error("Error generating PDF:", error); } };

export const generatePDFOnMount = async ( containerID, decodedQuotationName, setQuotationBlob, setIsDisabledButton ) => { try { const quotationFile = await generatePDF(containerID, decodedQuotationName); setQuotationBlob(quotationFile); setIsDisabledButton(false); } catch (error) { console.error("Error generating PDF:", error); } finally { setIsDisabledButton(false); } };

[gezichenshan]

YES, any solutions? it is because it first converts html to canvas and then pdf so there is no solution?