If we are building a website that requires a PDF generation feature, there are several options for implementing it based on the use cases or user requirements. First, we can generate the PDF on the client side using any available client library. It is suitable if the use case is to print out some data that is already available inside certain website components, and we want to maintain the styles of the components in the document. Second, we can do it fully in the back-end using any library available, such as PDF-lib, jsPDF, and so on. This approach is suitable if we want to keep the data processing or any related business functions in the back-end server. This second approach might have disadvantages, such as the difficulty of maintaining the design assets and styles which are already on our website. Third, it is using a hybrid approach, where certain processes are handled on the client side, and some are handled on the back-end.
In this post, I want to discuss more about the hybrid approach, why the hybrid approach can be beneficial and how we can implement it. The scenario is that we want to maintain the design of our website or product in the document generated. On the other hand, we want to keep certain business processes in the back-end. We want to let our frontend developer design and generate the document content while the back-end developer focuses on the data generation and the PDF creation. So, how does it actually work?
On the client side, we need to set up a private page or endpoint where the back-end data will be loaded and filled into the web page. This page should be private or require a certain access mechanism so that it is not publicly available to end users. Then, on the back-end, we utilise a tool such as Pupetteer or Playwright, which is shipped with a browser engine and can render a web page and print the result into a PDF. The web page generation actually can be done in the back-end using a certain HTML templating library such as Handlebars. But still, that could be more difficult for us to maintain the desired design.
To be clearer with this idea, we can see the following diagram. This diagram shows how a user from the client side can trigger the PDF generation with the hybrid approach.
Comments
Post a Comment