React-PDF

The Record Books project uses the React-PDF library to generate PDF reports for users. React-PDF is a React library that allows you to create PDF documents using React components. The library provides a set of components that you can use to create a PDF document, such as Page, Text, View, and Image.

Creating PDF Reports

The Record Books project uses React-PDF to generate PDF reports for users. The PDF reports are generated using the @react-pdf/renderer package, which is a renderer for React-PDF that allows you to render PDF documents on client-side.

The PDF reports are generated from templates in the src/components/reports directory in the Record Books project. The reports are generated using React components that represent the content of the report, such as text, images, and tables. The reports are then rendered using the @react-pdf/renderer package, which converts the React components into a PDF document.

info

The section does not show how to use React-PDF. See the Reports section in Code Base for more information the PDF reports in the Record Books project.

Rendering PDF Reports

PDFs are rendered in the browser using the @react-pdf/renderer package. Record Books renders PDFs for two different purposes:

1. Previewing PDFs in the browser: PDFs are rendered in the browser when users preview a PDF report in the Record Books application. The PDF is rendered using the PDFViewer component from the @react-pdf/renderer package.
2. Downloading PDFs: PDFs are downloaded when users click the "Download PDF" button in the Record Books application. The PDF is rendered using the PDFDownloadLink component from the @react-pdf/renderer package.

warning

There is a known issue on the provider's GitHub that PDFViewer does not work on mobile devices. When users preview a PDF report on a mobile device, a blank screen is displayed. To address this issue, the Record Books project should implement a solution that allows users to download the PDF report instead of previewing it on mobile devices.