Notes

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

setLoading(true);
var monthVal = getMonthLang(selectedLang);

try {
// Clone and setup initial content
const cloneContainer = htmlDivRef.current.cloneNode(true);
cloneContainer.id = 'clone-container';

// Set date
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;
}

// Apply styles
const style = document.createElement('style');
style.innerHTML = `
body, html {
margin: 0;
padding: 0;
}
#clone-container {
width: 21cm; /* A4 width */
min-height: 29.7cm; /* A4 height */
padding: 2cm;
box-sizing: border-box;
}
#clone-container .reach-notification-text {
white-space: pre-wrap;
word-wrap: break-word;
overflow-wrap: break-word;
line-height: 1.5;
font-size: 15px !important;
font-weight: 420 !important;
font-family: 'sans serif'!important;
}
@media print {
.page-break {
page-break-before: always;
}
}
`;
cloneContainer.insertBefore(style, cloneContainer.firstChild);
document.body.appendChild(cloneContainer);

// Calculate content height and create pages
const contentHeight = cloneContainer.scrollHeight;
const a4Height = 841.89; // A4 height in points
const numPages = Math.ceil(contentHeight / (a4Height * 1.3)); // 1.3 factor for safety margin

// Create PDF document
const pdfDoc = await PDFDocument.create();
const customFont = await pdfDoc.embedFont(brandonTextBase64Regular);

// Generate pages
for (let pageNum = 0; pageNum < numPages; pageNum++) {
const page = pdfDoc.addPage([595.28, 841.89]); // Correct A4 dimensions

// Calculate viewport for current page
const viewportHeight = a4Height;
const yOffset = pageNum * viewportHeight;

// Render current page section to canvas
const canvas = await html2canvas(cloneContainer, {
scale: 2,
windowHeight: viewportHeight,
y: yOffset,
scrollY: -yOffset,
useCORS: true
});

// Add content to PDF page
const imgData = canvas.toDataURL('image/png');
const pngImage = await pdfDoc.embedPng(imgData);

page.drawImage(pngImage, {
x: 0,
y: 0,
width: page.getWidth(),
height: page.getHeight()
});

// Add form fields if it's the first page
if (pageNum === 0) {
const form = pdfDoc.getForm();
const positions = [
{ x: 50, y: page.getHeight() - 245, width: page.getWidth() * 0.6, height: 110 },
{ x: 50, y: page.getHeight() - 674, width: page.getWidth() * 0.6, height: 42 },
{ x: 50, y: 33, width: page.getWidth() * 0.6, height: 100 }
];

positions.forEach((pos, index) => {
const textField = form.createTextField(`field_${index}`);
textField.enableMultiline();
textField.addToPage(page, {
x: pos.x,
y: pos.y,
width: pos.width,
height: pos.height,
textColor: rgb(0, 0, 0),
font: customFont,
fontSize: 10,
borderWidth: 1,
backgroundColor: rgb(1, 1, 1)
});
textField.setMaxLength(2000); // Increased max length
});
}
}

// Cleanup
document.body.removeChild(cloneContainer);

// Save and download PDF
const pdfBytes = await pdfDoc.save();
const blob = new Blob([pdfBytes], { 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);

auditTrailHandler('downloaded report PDF in final reports page');
} catch (error) {
console.error('Error generating PDF: ', error);
} finally {
setLoading(false);
}
};