How to export iframe display to PDF using ReactJS Typescript

23 views Asked by At

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

0

There are 0 answers