Notes

const generatePdf = async () => {
if (!htmlDivRef.current) return;

setLoading(true);

var monthVal = getMonthLang(selectedLang);

try {
// **Step 1: Clone the HTML content**
const cloneContainer = htmlDivRef.current.cloneNode(true);
cloneContainer.id = 'clone-container';

const today = new Date();
const day = today.getDate();
const monthNames = monthVal[0].months;
const month = monthNames[today.getMonth()];
const year = today.getFullYear();
const formattedDate = `${day} ${month} ${year}`;

const datePlaceholder = cloneContainer.querySelector('#date-placeholder');
if (datePlaceholder) {
datePlaceholder.textContent = formattedDate;
}

// **Step 2: Apply custom CSS styles to the clone**
const style = document.createElement('style');
style.innerHTML = `
body, html {
margin: 0;
padding: 0;
}
#clone-container .reach-date {
margin-bottom: 100px !important;
}
#clone-container .reach-volume2 {
margin-top: 100px !important;
margin-bottom: 150px !important;
}
#clone-container .reach-volume {
margin-bottom: -30px !important;
}
#clone-container .watermark {
display: none !important;
}
#clone-container .reach-notification-text {
margin-top: 130px;
min-height: 255px;
margin-bottom: 0 !important;
font-size: 15px !important;
font-weight: 420 !important;
font-family: 'sans serif'!important;
}
#clone-container .reach-pdf-container {
margin: 3.3cm 2.5cm 2cm 2.5cm;
border: none !important;
padding: 0 !important;
}
#clone-container .react-pdf-text {
margin-top: 0!important;
}
`;
cloneContainer.insertBefore(style, cloneContainer.firstChild);

// **Step 3: Append the clone to the body (but keep it hidden)**
cloneContainer.style.position = 'absolute';
cloneContainer.style.left = '-9999px'; // Move it off-screen
document.body.appendChild(cloneContainer);

// **Step 4: Render the cloned content to canvas using html2canvas**
const canvas = await html2canvas(cloneContainer, { scale: 2 });

// **Step 5: Remove the clone from the document**
document.body.removeChild(cloneContainer);

// **Step 6: Get the image data from the canvas**
const imgData = canvas.toDataURL('image/png');
const dpi = 300;
const pxToPt = 72 / dpi;

const highDpiWidth = 2480;
const highDpiHeight = 3508;

// **Set dimensions for A4 size**
const pdfWidth = 670.28; // A4 width in points
const pdfHeight = 841.89; // A4 height in points

// **Create a new PDF instance**
const pdfDoc = await PDFDocument.create();
let page = pdfDoc.addPage([pdfWidth, pdfHeight]);

// **Embed the image into the PDF**
const pngImage = await pdfDoc.embedPng(imgData);
page.drawImage(pngImage, {
x: 0,
y: 0,
width: highDpiWidth * pxToPt,
height: highDpiHeight * pxToPt,
});

// **Text field positions**
const inputFieldWidth = pdfWidth * 0.6;
const positions = [
{ x: 50, y: pdfHeight - 245, width: inputFieldWidth, height: 110 }, // First input box (near top)
{ x: 50, y: pdfHeight - 674, width: inputFieldWidth, height: 42 }, // Second input box (above third)
{ x: 50, y: 33, width: inputFieldWidth, height: 100 }, // Third input box (near bottom)
];

// **Create and add input fields with updated font size**
const form = pdfDoc.getForm();
positions.forEach((pos, index) => {
const textField = form.createTextField(`field_${index}`);
textField.enableMultiline(); // Enable multiline for the text field

textField.addToPage(page, {
x: pos.x,
y: pos.y,
width: pos.width,
height: pos.height,
textColor: rgb(0, 0, 0),
font: 14,
borderWidth: 1,
backgroundColor: rgb(1, 1, 1),
});

textField.setFontSize(10); // Decrease font size
textField.setMaxLength(200);
});

// **Step 7: Check for page overflow and break to the next page**
const textHeightLimit = pdfHeight - 150; // Set a limit for content height before a page break
if (pdfDoc.getPageCount() > 1) {
page = pdfDoc.addPage([pdfWidth, pdfHeight]); // Create a new page if needed
}

// **Step 8: Serialize and save PDF**
const pdfBytesModified = await pdfDoc.save();

// **Step 9: Download the PDF**
const blob = new Blob([pdfBytesModified], { type: 'application/pdf' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'Notification-Letter.pdf';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url); // Clean up the URL object
} catch (error) {
console.error('Error generating PDF: ', error);
} finally {
auditTrailHandler('downloaded report PDF in final reports page');
setLoading(false);
}
};