How to Generate Report in Angular 6 & Asp.Net Core Web API.

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.

Let’s start….

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.

“jspdf”: “^1.4.1”,
“jspdf-autotable”: “^2.3.5”,

Now, run this below command.

npm install

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 ‘jspdf-autotable’;
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.