Notes

const handleDisplayPdf = () => {
const content = document.querySelector('#download invoice'); // The main content to capture in the PDF

if (content) {
html2canvas(content, {
scale: 2,
useCORS: true,
ignoreElements: (element) => {
// Ignore the download button while rendering
return element.id === 'download-invoice-button';
},
})
.then((canvas) => {
const imgData = canvas.toDataURL('image/png');
const pdfWidth = 210; // A4 width in mm
const pdfHeight = 297; // A4 height in mm
const imgHeight = pdfHeight;
const imgWidth = (canvas.width * imgHeight) / canvas.height;

const xOffset = (pdfWidth - imgWidth) / 2;

const doc = new jsPDF({
orientation: 'portrait',
unit: 'mm',
format: 'a4',
});

doc.addImage(imgData, 'PNG', xOffset, 0, imgWidth, imgHeight);

// Extract the policy number and reporting period dynamically
const policyNumber = data?.policyNumber || 'unknown_policy';
const reportingPeriod = data?.reportingPeriod || 'unknown_period';

// Construct the filename dynamically
const fileName = `${policyNumber}_${reportingPeriod}_summary.pdf`;

// Save the file with the dynamic name
doc.save(fileName);
})
.catch((error) => {
console.error('Error generating PDF:', error);
});
} else {
console.error('Content not found!');
}
};