2

Can anyone recommend a method to render a pdf with images and fonts, preferably with React? My goal is to render a custom pdf with an image of a company logo and a dynamic html table, once a button is pressed in my react frontend. Ideally the PDF is rendered on the server side, then the file is attached to an email to be sent to the customer.

I have been using React-PDF/Renderer but server side rendering has endless webpack issues. I can get it to render with fonts and images here in a stand alone app, but not in my full app with the seperate front and back ends, the bundled js complains Cannot fetch dangerous local path: images/logo.png and its anyone's guess as to why. So I'm looking for a better solution... my current solution is to just layer the image onto the PDF after through a python script, but I'd prefer not to do this.

Who knew rendering some simple HTML into a pdf was so complex... another method I've considered is to feed the needed information for the table to a Google Doc with a template through Google App Script (GAS), but that also seems needlessly complex. There must be some solution I'm missing through Vite (to avoid webpack) or Next.JS (to avoid react-pdf/renderer)...............

Another approach might be to render the pdf client side with React-PDF/Render since that library is more reliable client side, but I don't know how I would attach the pdf to an email that would be sent off... Do I stream it to the server, after being rendered on the frontend, to be sent? Can it all be done client side without displaying the rendered pdf to the client?

0 Answers0