The ngx-print Library To Print HTML To PDF In Angular Application

In this article, we will understand the process to generate the HTML to PDF using 'ngx-print' library in Angular.

An Overview On ngx-print Library:

This library works based on directives. These directives make the printing HTML to PDF very easily with smooth transitions. The key terms of this library are:

• NgxPrintModule
• ngxPrint(Directive)
• printSectionId(Input Property)
• printTitle(Input Property)
• printStyle(Input Property)
• useExistingCss(Input Property)
• styleSheetFile(Input Property)

Create A Sample Angular Application:

Let's create a sample angular application where we are going to implement logic to use 'ngx-print' library.

Command To Install Angular CLI:(If not installed on your system previously)
npm install -g @angular/cli

Angular CLI Command To Create Angular App:
ng new your_project_name

Command To Run App:
ng serve

Install Print Npm Package:

Command To Install Print Package
npm install ngx-print

After installing the npm package reference will be automatically added to the package.json file.

Import Print Module:

To work with the 'ngx-library' we need to import the 'NgxPrintModule' into our AppModule file.

src/app/app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {NgxPrintModule} from 'ngx-print';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxPrintModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

• Here imported 'NgxPrintModule' that is loads from the 'ngx-print' library.

'ngxPrint' Directive And 'printSelectionId' Input Property:

The 'ngxPrint' directive is the print triggering point. So it should be decorated on the button on which click we need to generate the HTML to PDF.

The 'printSelectionId' is angular input property. It should be decorated on the button like 'ngxPrint'. The value for the property is Html 'Id' value that means the Html within that 'Id' tag will be the selected region for generating the PDF.

Now let's implement logic to display todos which we want to display and print as PDF.

src/app/app.component.ts:

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

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

  mytodos = [
    {
      item:'need to buy movie tickets',
      isCompleted:false
    },
    {
      item:'Gardening tomorrow 9:00AM',
      isCompleted:false
    },
    {
      item:'Car Washing',
      isCompleted:true
    },
    {
      item:'Buy a pen',
      isCompleted:false
    }
  ]
  title = 'print-sample';
}

• Here in our component added an array of todos items.

src/app/app.component.html:

<div>
  <button  printSectionId="mytodosItemsId" ngxPrint >Print</button>
  <div id="mytodosItemsId">
    <h4 >My todos</h4>
    <div >
      <ul>
        <li *ngFor="let t of mytodos">
          <span [ngClass]="[t.isCompleted? 'itemCompleted':'itemInCompleted']">
		  {{t.item}}
		  </span>
        </li>
      </ul>
    </div>
  </div>
</div>

• (Line: 2) Print button decorated with 'ngxPrint' directive and 'printSectionId' input parameter. Here we want to print the data inside of the div id value 'mytodosItemId'.
• Here binding the todos item and based on todos item status dynamically adding the CSS class name.

src/app/app.component.css:

.itemCompleted{
    color: purple;
    text-decoration: line-through;
}
.itemInCompleted{
    color: green;
    text-decoration: none;
}

Here we can see we are able to generate the HTML to PDF, but styles are missing which we will discuss in the next steps.

PDF Title:

We can also assign a PDF title by using the 'printTitle' input property that will be decorated on print button.

src/app/app.component.html:(Update print button)

<button  
printSectionId="mytodosItemsId" 
printTitle="My Angular Print Media" 
ngxPrint>Print</button>

'printStyle' Input Property:

The 'printStyle' property is an object type where we can pass the style that we want to apply in our PDF file.

src/app/app.component.html:(Update print button)

<button
printSectionId="mytodosItemsId"
printTitle="My Angular Print Media"
ngxPrint
[printStyle]="{ h4: { color: 'red' } }"
>
Print
</button>

• Here we are applying style like all 'h4' tags in PDF should be in red color.

'useExistingCss' Input Property:

The 'useExistingCss' input property accepts a boolean value. This property defines pdf to use the styles on the web page.

src/app/app.component.html:(update print button)

<button
printSectionId="mytodosItemsId"
printTitle="My Angular Print Media"
ngxPrint
[useExistingCss]="true"
>
Print
</button>

'styleSheetFile' Input Property:

The 'styleSheetFile' input property to load the external CSS file to style up the PDF file. This external file should be loads from the assets folder.

src/assets/pdf.css:

.itemCompleted{
    color: rgb(128, 0, 0);
    text-decoration: line-through;
}

.itemInCompleted{
    color: blue;
    text-decoration: none;
}

src/app/app.component.html:(update print button)

<button
printSectionId="mytodosItemsId"
printTitle="My Angular Print Media"
ngxPrint
styleSheetFile="assets/pdf.css"
>
Print
</button>

That's all about generating HTML to PDF in the angular application using the 'ngx-print' library.

Support Me!
Buy Me A Coffee PayPal Me

Wrapping Up:

Hopefully, I think this article delivered some useful information about 'ngx-print' library integration and implementation in angular application. I love to have your feedback, suggestions, and better techniques in the comment section below.

Refer:

Click here for a video session

Follow Me:

Facebook

Twitter

Pinterest