Angular 9 Tutorial to Convert HTML to PDF Using jsPDF & html2canvas Library Full Project For Beginners

 

Welcome folks today in this blog post we will be converting html to pdf using jspdf & html2canvas library. All the full source code of the application is shown below.

Angular 9 HTML to PDF Using jsPDF and HTML2Canvas Library 2021 video
 

 

 

Get Started

 

 

In order to get started you need to execute the below command to create new angular project

 

 

ng new html-to-pdf

 

 

Now you need to install the below libraries using the npm command as shown below

 

 

npm i html2canvas

 

npm i jspdf

 

 

Now create the app.component.html file and add the code in it.

 

 

app.component.html

 

 

<h1>HTML to PDF in Angular 9</h1>
<button (click)="generatePDF()">Generate PDF</button>

<table id="contentToConvert" border="1" width="100%">
  <tbody>
    <tr>
      <th>ID</th>
      <th>Article</th>
      <th>Technology</th>
      <th>Author</th>
    </tr>
    <tr>
      <td>1</td>
      <td>Star Rating In Angular 9</td>
      <td>Angular</td>
      <td>Yasin</td>
    </tr>
    <tr>
      <td>2</td>
      <td>TypeAhead With Custom Result Template In Angular 9</td>
      <td>Angular</td>
      <td>Yasin</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Circular Progress Bar In Angular 9</td>
      <td>Angular</td>
      <td>Yasin</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Display Loader/Spinner On Each HTTP Calls In Angular 9</td>
      <td>Angular</td>
      <td>Yasin</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Form Validation In Angular 9</td>
      <td>Angular</td>
      <td>Yasin</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Building Responsive Carousel Slider In Angular 9</td>
      <td>Angular</td>
      <td>Yasin</td>
    </tr>
    <tr>
      <td>7</td>
      <td>How To Implement Lazy Loading Module In Angular 9</td>
      <td>Angular</td>
      <td>Yasin</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Separate Development And Production URL In Angular 9</td>
      <td>Angular</td>
      <td>Yasin</td>
    </tr>
  </tbody>
</table>

 

READ  Join 10 Angular Whatsapp Group Links For Developers in 2021 | Whatsapp Group Links For Angular Web Developers

Open the app.component.ts file and add the code in it.

 

 

app.component.ts

 

 

import { Component } from '@angular/core';
import * as jspdf from 'jspdf';
import html2canvas from 'html2canvas';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'html-to-pdf';

  generatePDF() {
    var data = document.getElementById('contentToConvert');
    html2canvas(data).then(canvas => {
      var imgWidth = 208;
      var imgHeight = canvas.height * imgWidth / canvas.width;
      const contentDataURL = canvas.toDataURL('image/png')
      let pdf = new jspdf('p', 'mm', 'a4');
      var position = 0;
      pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)
      pdf.save('newPDF.pdf');
    });
  }
}

 

Leave a Reply