PDF Test

This project shows examples for how to do client-side PDF rendering in a React app.

You can see it live at https://pdf-test-sample.vercel.app.

Homepage	MUI View	Generic View

Under the Hood

This project uses the jspdf-html2canvas library to generate PDF documents on the client.

If you are interested in doing something similar in your app, take a look at src/components/ReportGenerator.js.

You can write your own custom views for ReportGenerator as well. Two example views are provided:

• ReportViewMUI - a view that is based on MUI components and MUI icons.
• ReportViewGeneric - a view that is built with generic React compoments and styled using the emotion library.

Limitations

• jspdf-html2canvas generates PDF documents by converting the output to an image. Thus, text is not selectable in the output.
• Due to CORS, external images cannot be rendered in the PDF documents. For more info, read the info in the Vivid Report example.