In this tutorial, we are going to learn how to generate report in angular 6 and ASP.NET Core application. There are lots of reporting tools in angular. But now in this tutorial, we are going to use jspdf to generate pdf reports in angular 6 with very basic example.
First-of-all, we will install jspdf in angular 6 and asp.net core application, then we will get data from server using service and then we will write some typescript code for generating pdf report.
How to generate report in angular 6 and asp.net core application.
Step # 1: Install jspdf
First, we need to install jspdf in angular 6 and asp.net core application. To do this, just run this below command in terminal.npm install jspdf –save
OR you can do this by copy these below two lines of code and then go to project folder structure and then open package.json file and then paste these copied lines under dependencies.
Now, run this below command.
Step # 2: Get record from service
Now, in this step, we will get all the record from database using service as you see in the below file of code.
Step # 3: Add typescript code for report
Now, in this step we will write some typescript code to generate report in pdf. So, to do this, just open ts file of your component and then import these below lines just above the code.
import * as jsPDF from ‘jspdf’;
Now, add this below function in your ts file.
Let’s understand the above file of code.
In line # 5: In this line, we are pushing all the column headers that we need to show on pdf report.
Line # 7 to 14: In these lines, we are pushing all the data that we are getting from database.
Line # 15: In this line, we will call the getReport() function with three parameter like columns, row data and title of report. And this function will set header, footer, page size, page count and etc.
Step # 4: Add HTML Code
Now, open the html file and then add this below line of code. This is a simple button with click event.
Now, finally run your application and then you will see a button on output page with the name of “PDF”. Now, click on button and then it will download the pdf report as you see below.