Create PDF using Angular + Spring Boot + Thymeleaf

Photo by J-S Romeo on Unsplash

Angular and Spring Boot have become popular among developers because of the ease of programming and the efficiency that they have. Today we will be looking at how we could simply create a PDF using these two technologies which would be really helpful as this could be integrated to any project where a software requirement is there to create a PDF.

Here we will be having an Angular 6 front-end from which we will be collecting data using a simple form and along with it a Spring Boot back-end to create the PDF.

Lets first start with the Angular project. Use the below command to create a new project

ng new project_name

It is time to create the html form to collect data. So let us move to the app.component.html file. 

Next we need to edit the app.component.ts file to send the collected data to the back-end. We will be using the HttpClient to communicate with the Spring Boot back-end.

It is important to make sure that all the imports which are mentioned at the beginning of the component.ts files are present in the project node modules folder. If not they must be installed as below.

npm install imported_file_name

Now let us move to the Spring Boot project. You can create a Spring Boot project easily from here.

First we need to edit our pom.xml file in order to import the dependencies that we will be needing in the project.

Second we need to create a class for us to take the data passed by the Angular front-end to the Spring Boot back-end.

Now we need to create the controller class to get the data from the front-end, pass that data to the pdf-templates and also to initialize the pdf-templates.

We will be using Thymeleaf to configure the pdf-templates. Let us now create the configuration class to configure the SpringTemplateEngine and the SpringResourceTemplateResolver.

Next we need to design the PDF view using html syntax in the Spring Boot project. 

With that we have reached the end of our implementation and now you can try to work with it.. Not just that, feel free to use it in your software when required..

Hope this could help!! The project source code can be downloaded from GitHub .. 

Cheers!! Have a pleasant day!!


    1. Post

Leave a Reply

Your email address will not be published. Required fields are marked *