What does React-pdf renderer start with?
Give a developer the invoice data and the layout you need. The package called @react-pdf/renderer uses its own document, page and text components to create a PDF.
The code that calculates the total belongs to your app. The renderer places that total on the page. This package creates a document from a layout. A similarly named React-PDF viewer displays PDFs that already exist.
How do you check the invoice when it grows to two pages?
Use a short fictional invoice and a longer copy that wraps to another page. Check that the amounts still line up and that the total and payment instructions appear where a reader expects.
Include a long item name and any characters your document needs. React-pdf documents registration for supported font files. Check that the PDF shows the expected characters, including when someone opens the saved file on another device.
What do you keep after generating the file?
Keep the PDF and the source layout. Your app still needs to decide where the file is saved and who can retrieve it. React-pdf can run in the browser or in Node on the server, where it can write a file or stream the result.
The renderer is open source under the MIT license. You supply the app code, the time it takes to generate files and any storage you use. For a private invoice, let your app authorize access to the saved file.
How can you check the layout before writing code?
Sketch two pages for an invoice from a fictional workshop. Use no real invoice, file upload or sending integration.
- Draw the short versionPlace the invoice reference, two line items and the total where a customer can find them.
- Make the invoice longerAdd a long line item that carries the invoice onto a second page. Mark which headings need to repeat and where the total should appear.