How to Convert HTML into PDF in Angular  12/11?

How to Convert HTML into PDF in Angular 12/11?

Angular 11/12 HTML to pdf example. In this tutorial, you will learn how to implement an angular 11 generate pdf from html.

This tutorial will use pdfmake, html-to-pdfmake and jspdf package for generating pdf file from HTML. And will help you step by step on how to generate HTML to pdf angular 11/12 app.

Angular 12/11 Convert HTML into PDF Tutorial with Example

  • Step 1 – Create New Angular App
  • Step 2 – Install Package
  • Step 3 – Add Code on View File
  • Step 4 – Add Code On Component ts File
  • Step 5 – Start Angular App

Step 1 – Create New Angular App

First of all, open your terminal and execute the following command on it to install angular app:

ng new my-new-app

Step 2 – Install Package

In this step, you need to install Package in our angular application. So, open your terminal and execute the following command:

npm install --save pdfmake
npm install html-to-pdfmake
npm install jspdf --save

Step 3 – Add Code on View File

In this step, create a table and display data on it to convert it to pdf file. So, visit src/app/app.component.html and update the following code into it:

<div class="container">
  <div id="pdfTable" #pdfTable>
    <h2>Angular HTML To PDF Generator Example - tutsmake.com</h2>
              
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Website</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Sam</td>
          <td>Sam</td>
          <td>tutsmake.com</td>
        </tr>
        <tr>
          <td>john</td>
          <td>dam</td>
          <td>w3school.com</td>
        </tr>
        <tr>
          <td>jonhy</td>
          <td>hid</td>
          <td>geeks.com</td>
        </tr>
      </tbody>
    </table>
  </div>
  <button class="btn btn-primary" (click)="downloadAsPDF()">Export To PDF</button>
</div>

Step 4 – Add Code On Component ts File

In this step, visit the src/app directory and open app.component.ts. Then add the following code into component.ts file:

import { Component, ViewChild, ElementRef } from '@angular/core';
  
import jsPDF from 'jspdf';
import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
pdfMake.vfs = pdfFonts.pdfMake.vfs;
import htmlToPdfmake from 'html-to-pdfmake';
   
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'htmltopdf';
  
  @ViewChild('pdfTable') pdfTable: ElementRef;
  
  public downloadAsPDF() {
    const doc = new jsPDF();
   
    const pdfTable = this.pdfTable.nativeElement;
   
    var html = htmlToPdfmake(pdfTable.innerHTML);
     
    const documentDefinition = { content: html };
    pdfMake.createPdf(documentDefinition).open(); 
     
  }
}

Step 5 – Start Angular App

In this step, execute the following commands on terminal to start angular app:

ng serve

Recommended Angular Posts

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

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