Hello, today I will share with you my experience about PDF file creation processes using HTML templates, I have been thinking about how to create HTML content as a PDF file for a while. The experiences I gained during this process consisted of a few add-ons. At first, I started using the plugin named WKHTMTOPDF, then as a result of my research on its website and on the internet, I saw that people were turning to different alternatives and I decided to use a different plugin.
Of course, what was more important was the excess of requirements and expectations, your criteria for using them will vary according to these expectations, my personal expectation is to PDF the page with a simple html and css styling on a regular basis.
Disadvantages of WKHTMLTODF
-
Cost of development.
-
Comprehensiveness of API and documentation and problems in conversions with HTML CSS.
-
Limited ability to reproduce and configure quickly.
-
Not recommending its use in areas such as report processes in terms of providing end-user support.
If you’re using it to convert a site which uses dynamic JS, consider using puppeteer or one of the many wrappers it has.
This excerpt from the WKHTMLTOPDF website led me to the Puppeteer plugin, and I’m glad I saw this detail.
PUPPETEER
It is a plugin supported by Google using the Chromium infrastructure. Using NodeJS, you can easily integrate and use most of its features such as Test, ScreenShot, PDF Export. What I observed in general; Easy configuration and compatibility with the Javascript ecosystem, compatibility with many software solutions you can think of, are reasons for preference for this plugin.
https://github.com/puppeteer/puppeteer
Here in the article, I will not tell you line by line code because there are already hundreds of examples about this plugin, my goal is how to set up a dynamic structure? You get the answer to this question. If you examine the project I shared on Github, you will understand what I mean.
I preferred this plugin as a solution in my own project and I wanted to create a sample project in this article. In this project, our aim was to list the data received through the Restful API in the SPA (Single Page Application) web application and to create the documents of the data in this list.
Here, I used .NET 6 Minimal API for the API as technology, I created the PDF file by taking requests over the endpoints with the help of ReactJS and Puppeteer and ExpressJS for the interface. On the minimal API side, I entered dummy data into a simple SQLite database.
I made it Docker compatible and uploaded it to github, if anyone is curious, they can check it out from the links below.
Git Clone
git clone https://github.com/rootturk/vuckopdf.git
Running with Docker:
docker-compose up
References
- https://rodolfo-marcos07.medium.com/how-to-generate-beautifull-pdf-using-nodejs-puppeteers-and-handlebars-7e3a1ef7cfb7
- https://www.section.io/engineering-education/build-and-dockerize-a-full-stack-react-app-with-nodejs-and-nginx/
- https://towardsdatascience.com/deploying-a-react-nodejs-application-with-docker-part-i-of-ii-910bc6edb46e
Thank you very much for reading this article, I hope to see you in the next series of articles, I end this article by giving you a piece as a gift.
Until the next time.
Akın.