• About Me
  • Contact Us
  • Privacy Policy
  • Terms and Conditions
  • Advertise / Sponsor

DOTNET DETAIL

Learn Microsoft .NET Technologies

  • Home
  • Tutorials
    • Angular
      • Angular 5
      • Angular 6
    • ASP.NET Core
    • Azure
    • React
    • Vue
  • Books
  • Courses
  • Cloud Hosting
  • Interview Questions
You are here: Home / Angular / How to Generate Report in Angular 6 & Asp.Net Core Web API.

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

January 21, 2019 by mebakar1005 Leave a Comment

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.

See also  How to setup a project with Angular 6 & ASP.NET Core 2.1 using VS 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.

How to add swagger to ASP.NET Core 3.0 Web API
Two Factor Authentication (2fa) in Angular 6 using Facebook Account Kit

Related

Filed Under: Angular, Angular 5, Angular 6, Angular 7, ASP.NET Core, web API Tagged With: Angular 6, ASP.NET CORE, JSPDF, PDF Report

Leave a Reply Cancel reply

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

Buy me a coffeeBuy me a coffee

Jobs

Dotnet Jobs

Join Us

Join Us

Subscribe to Blog via Email

Enter your email address to subscribe.

Recent Posts

  • Very best Antivirus Software
  • Realmente Hace Él En absoluto como yo ?
  • Fiscal Planning — What You Need to Know
  • Organization Strategies for Good Business Success
  • Contemporary Business The usage
  • Deciding on a Document Management Program
Copyright © 2022