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

30 Comments

  1. Deepak

    With this code image is not getting present in the PDF, but it is present in the HTML

    0
    0
    Reply
    1. Deepak

      Please suggest

      0
      0
      Reply
      1. To fix this issue you must have to use Base64 of your image in src.

        0
        0
        Reply
  2. ian

    Awesome!

    0
    0
    Reply
    1. Thank You 🙂

      0
      0
      Reply
  3. Jinu

    This is not working,

    TypeError: jspdf__WEBPACK_IMPORTED_MODULE_1__ is not a constructor

    0
    0
    Reply
    1. import * as jspdf from ‘jspdf’;
      The above syntax is working perfectly by my side, please check it again and let me know.

      0
      0
      Reply
  4. Abhisar Garg

    This expression is not constructable.

    Type ‘typeof import(“jspdf”)’ has no construct signatures.

    0
    0
    Reply
    1. Ian

      Change` import * as jspdf …` to `import jspdf …`

      0
      0
      Reply
      1. MIke

        changed to
        import { jsPDF} from ‘jspdf’;

        0
        0
        Reply
  5. Kupani

    i want to download!

    0
    0
    Reply

Submit a Comment

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

Subscribe

Select Categories