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 |
|---|---|---|
 |
 |
 |
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 theemotionlibrary.
jspdf-html2canvasgenerates 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.