This is JSX file that I have to display all the email templates and display them with personalized and dynamic content:
<div className="w-[100%] flex justify-between items overflow-x-auto mb-2 flex-col">
<div>{renderDataTable()}</div>
<div className="flex flex-row overflow-x-auto w-[95%]">
{emailData.map((email: any, index: any) => (
<div
className="mr-2 bg-[#ededed] rounded-sm p-2 flex flex-col justify-center items-center"
key={index}
>
<h1 className="mb-2 text-[18px] p-2">{email.name}</h1>
<div >
<iframe
srcDoc={
emailHtmlCodes[index]
? emailHtmlCodes[index]
: email.htmlCode
}
title={`my-iframe-${index}`}
width={650}
height={600}
></iframe>
</div>
<div className="flex justify-center items-center mt-2">
<button
className="text-white rounded cursor-pointer bg-blue-500 px-4 py-2"
>
Print PDF
</button>
</div>
</div>
))}
</div>
</div>
I already tried the react-to-print, jsPFD, html2PDF, react-pdf/renderer. But it didnt displayed it properly or the image is not printing.
BTW. I am passing a whole html code content on the (emailHtmlCodes[index]) iFrame srcDoc which is an email template from SFMC and display it to the UI