This is where the break-inside CSS property steps in. It happens because your web browser has no idea where to break page if you don't tell him. Deal with page breaks and fixed size with CSSĪs you can see with the Boursorama example, your components may be cut off between 2 pages when trying to print your page.

You may pass this props to every dynamic component of your page, that needs to be adapted for printing.

In this case, the isPrintable props will determine whether to display the 3 tabs, or just the first one. Something like displaying the tabs one after the other may do the trick:Ĭonst tabNames = (isPrintable ? For example, if you have a table with 3 tabs, you will probably want to display the content of all the tabs. If you opt for the second solution (that is less costly), you will have to adapt your existing components. create a whole new custom design for your page.You basically have 2 solutions for this part: To create the printable version of our page, you will have to add/remove/modify the different components that make up the page. A PDF has page breaks and a fixed size whereas a webpage is a 'one page' app with a variable viewport sizeĬreate the 'printable version' of your SPA with React.The components of a React application are dynamic whereas a PDF is a static file.To adapt your code for printing, you have to bypass the 2 main differences between a web page and a PDF: However, the feedback loop is not as quick as usual. You can make your changes to your code as usual, and then ctrl+P on your page to see what it looks likes: Render a printable version of your pageįor this part you don't actually need to have Puppeteer or any other printer service set up. Then, I will show you how to use Puppeteer for the generation of your new printable page. Firstly, I will explain to you how you can create a printable version of your page with React and Puppeteer. In this article, I want to give you a few tips to generate beautiful PDFs of SPAs with Puppeteer. Indeed, there are easier solutions for this use case like wkhtmltopdf, html-pdf-node or jspdf for example. It may not be so if you don't deal with javascript bundles but with plain HTML/CSS. According to me, it is the easiest way to deal with PDF generation of Single Page Applications. But my choice went naturally to the well-known, google-developed library: Puppeteer. That's when I said 'ok this feature may be worth it', but how should I do it? There are many open source libraries that can generate PDFs.

Download google puppeteer