How To Convert HTML To PDF In Angular 9

In this article, we will learn how to convert HTML to PDF in Angular 9.

Prerequisites:

• Basic knowledge of Angular
• Code editor like Visual Studio Code

Create a new Angular project by typing the following command in the VSCode terminal.

ng new html-to-pdf

Now, open the newly created project and execute the commands given below.

npm install html2canvas
npm install jspdf

html2canvas

The script allows you to take “screenshots” of webpages or parts of it, directly on the user’s browser. The screenshot is based on the information available on the page.

jspdf

Generate PDF files in client-side JavaScript.

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

<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>

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

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');
    });
  }
}

Output:

 

When you hire Angular developers in India, you get a lot of advantages.  Hire our Angular developers to create a competitive e-commerce app for you. At Angular Minds, we offer a variety of exceptional services from our team of highly motivated and devoted Angular Developers who are known for creating engaging web applications that help you achieve your business objectives.

Please give your valuable feedback and if you have any questions or issues about this article, please let me know.

Also, check Star Rating In Angular 9