How to Add Print Page Button in Angular 12 without Plugin

How to print the HTML page in an angular app is going to be discussed; we will learn how to integrate the feature of adding a button to generate the PDF file out of our current page. Which can be saved as a PDF file or get printed.

If you are looking for add Print this page button in the Angular application, then you are in right place. We are going to learn how to add a Print this page button without using any third-party plugin.

Let’s go through the following quick steps to implement the Print Page feature in the Angular 12 application in our example application.

Add Print Page Feature in Angular Application

Setup Angular Application
Update HTML Template
Add Print Page Method in Component Class
Run Development Server

Setup Angular Application

Commence with a new angular application, execute the following ng command in the terminal window:

$ ng new angular-demo-app

Update HTML Template

Thereafter, put some HTML stuff in the component view. We are adding a table that will be added into the PDF file generate to get a print.

Open the app.component.html file and update it with the following template HTML in it.

<table class="table">
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Email</th>
      <th>Image</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>[email protected]</td>
      <td>
        <img src="https://i.pravatar.cc/50?img=1" alt="thumb" />
      </td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>Moe</td>
      <td>[email protected]</td>
      <td>
        <img src="https://i.pravatar.cc/50?img=2" alt="thumb" />
      </td>
    </tr>
    <tr>
      <td>July</td>
      <td>Dooley</td>
      <td>[email protected]</td>
      <td>
        <img src="https://i.pravatar.cc/50?img=3" alt="thumb" />
      </td>
    </tr>
  </tbody>
</table>

<button (click)="printThisPage()">Print This Page</button>

Add Print Page Method in Component Class

Next, update the component class with printThisPage() method. This method will execute the window.print() method to print the document with full DOM HTML.

Open the app.component.ts class file as shown below.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  
  constructor() { }

  //Print Page
  printThisPage() {
    window.print();
  }
}

Run Development Server

That’s it, we are ready to test our application with the Print This Page button. Execute the following ng command

$ ng serve --open

It will open the application on the following URL

http://localhost:4200

Conclusion

We are completed our tutorial on adding the print this page feature in the Angular app. We used the windows print method to generate the PDF document of the HTML view template. This provides a quick solution to add a Print feature without any third-party package or library.

Category: Angular