Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

Angular 14 jsPDF Project to Export HTML Div,Table With CSS to PDF Document Using TypeScript

Posted on December 16, 2022

 

 

 

 

 

Welcome folks today in this blog post we will be exporting html table and div to pdf document using jspdf library in angular 14 using typescript. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to make a new angular project using the below command

 

 

ng new sampleproject

 

 

cd sampleproject

 

 

Now we need to install the jspdf library using the below command

 

 

npm i jspdf

 

 

After this you need to copy paste the below html code inside the app.component.html file as shown below

 

 

app.component.html

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<style>
td{
background-color:orange
}
</style>
<div id="content" #content>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Country</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>23</td>
        <td>New Zealand</td>
      </tr>
      <tr>
        <td>Smith</td>
        <td>24</td>
        <td>Australia</td>
      </tr>
    </tbody>
  </table>
</div>
<button (click)="makePdf()">Generate PDF</button>

 

 

As you can see that guys in the above html code we have declared a simple table inside this we have two rows and three columns and then we are also attaching the id or reference to the table so that we can track it inside the typescript file. And then we have the button to export this html5 table to pdf document. We have binded a onclick listener to the button which is makePdf() we need to write this function in the below file of app.component.ts

 

 

app.component.ts

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { Component, ElementRef, ViewChild } from '@angular/core';
import jsPDF from 'jspdf';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
 
  @ViewChild('content', { static: false }) el!: ElementRef;
 
  title = 'angularpdfgenerator';
 
  makePdf() {
    let pdf = new jsPDF()
    pdf.html(this.el.nativeElement, {
      callback: (pdf) => {
        pdf.save("sample.pdf")
      }
    })
  }
}

 

 

As you can see we are importing the jsPDF library at the very top and then we are declaring a new pdf document and then we are calling te html() method and in this method we are passing the reference of the table which is the id that we have given in the app.component.html file. It will copy paste all the html which is there to this method and lastly we are exporting this html5 table data to the pdf document.

 

 

 

 

 

Recent Posts

  • Android Java Project to Crop,Scale & Rotate Images Selected From Gallery and Save it inside SD Card
  • Android Kotlin Project to Load Image From URL into ImageView Widget
  • Android Java Project to Make HTTP Call to JSONPlaceholder API and Display Data in RecyclerView Using GSON & Volley Library
  • Android Java Project to Download Youtube Video Thumbnail From URL & Save it inside SD Card
  • Android Java Project to Embed Google Maps & Add Markers Using Maps SDK
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme