![]() One straightforward way is to use native browser printing with CSS print rules. Using various methods discussed in the article, you can convert your HTML page to a PDF document.How can I save my entire HTML page as a PDF document using React? Implementation can be complicated in some cases The PDF document content is not dependent upon the size of the browser window Moreover, the document it will generate allows the selecting and searching of text and can also be saved on the server without any additional API calls. This seems the most comprehensive solution as it affords the greatest number of benefits and can address even the most difficult of cases. On the client-side, it is then fetched, transformed to the blob and saved. ![]() Once created, the document is sent back to the front-end. Here’s an example that navigates directly to the URL, changes some styles and generates a PDF file: And from the documentation, we see that it can be used to generate screenshots and PDFs of pages. In other words, the Puppeteer is a browser you can run from Node.js. Given its code is written on the back-end, this solution is the most complex and unlike any of the fully client-side ones mentioned above. Using Puppeteer, Headless Chrome with Node.js The user is unable to select and search text The downside, however, is that there is still no capacity to select and search the text. This way, you can create decent PDFs looking just like the original HTML, and now have control over both the document’s appearance and the elements that can be included in it. To do this, create a screenshot from multiple elements and combine them into one PDF document: However, if the HTML is lengthy you might want to relegate different elements to separate pages. Accordingly, the function will look like this:Īs you can see, it is possible to add some styles before the HTML => Canvas transformation. ![]() We can make the Canvas => Image part with vanilla JavaScript. Html2canvas for creating a screenshot from HTML and generating Canvas from it Here’s another straightforward solution: just take a screenshot of the page or element and convert it to a PDF document with Canvas and image transformation: Making a Screenshot from the DOM (HTML => Canvas => Image => PDF) The PDF document content is dependent upon the size of the browser window There is no access to code-generated PDFs Save buttons can be difficult to find owing to browser-rendering discrepancies It can be problematic rendering identical results in different browsers ![]() It allows the user to select and search text But it is not so ideal when access to code-generated documents is required. Here’s an excellent article describing more of what you can do using these print rules in CSS.įor something small and simple this is an ideal solution and one that would be over-engineered by the use of libraries. This can be achieved with some specific style properties as shown in this example: We also might want to manage page breaks and/or eliminate overlappings. Should we wish to change its appearance, hide certain items or change the elements’ size in the PDF, we can write CSS print rules: Generally speaking, a browser can already save and print PDFs from our pages: just press Ctrl/Cmd + P for the adjustable document pop-up by which you can customize its appearance.Ĭreating a button to perform the same action is as follows: Note that the callback function expects an object for the response ( not a Response object), which must have a “ body” key: exports.Using native browser printing with CSS Print Rules
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |