Angular 16 Print HTML Page to PDF Tutorial

Print an HTML page to a PDF in an Angular 16 application; In this tutorial, you will learn how to use the html2pdf.js library to print HTML pages to PDF in angular 16.

Angular 16 Print HTML Page to PDF Tutorial

To print html page to pdf in angular 16 using html2pdf.js, you can do it by following steps:

• Step 1: Create a New Angular Application
• Step 2: Install html2pdf.js Library
• Step 3: Create a Component
• Step 4: Implement PDF Printing in the Component
• Step 5: Create the HTML Template
• Step 6: Add the Component to the App
• Step 7: Run the Application

Step 1: Create a New Angular Application

Let’s start by creating a new Angular application. Open your terminal and run the following command:

ng new my-new-app

Step 2: Install html2pdf.js Library

To use the html2pdf.js library to convert the HTML content to a PDF file. Install it by running the following command in your project directory:

npm install html2pdf.js

Step 3: Create a Component

Next, create a new Angular component where you’ll implement the PDF printing functionality. Run the following command to generate a component:

ng generate component pdf-print

Step 4: Implement PDF Printing in the Component

Open the pdf-print.component.ts file and import the necessary modules:

import { Component, ElementRef, ViewChild } from '@angular/core';
import html2pdf from 'html2pdf.js';

Create a function in the component to trigger the PDF printing. This function will select the HTML element you want to convert to a PDF and pass it to html2pdf. Here’s an example:

export class PdfPrintComponent {
  @ViewChild('pdfContent') pdfContent: ElementRef;

  constructor() {}

  generatePDF() {
    const content = this.pdfContent.nativeElement;

    const options = {
      margin: 10,
      filename: 'document.pdf',
      image: { type: 'jpeg', quality: 0.98 },
      html2canvas: { scale: 2 },
      jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
    };

    html2pdf().from(content).set(options).outputPdf((pdf) => {
      const pdfBlob = new Blob([pdf], { type: 'application/pdf' });
      const pdfUrl = URL.createObjectURL(pdfBlob);
      window.open(pdfUrl);
    });
  }
}

Step 5: Create the HTML Template

Open the pdf-print.component.html file and add the HTML content you want to convert to a PDF. For this example, will create a simple page with a button to trigger the PDF generation:

<div #pdfContent>
  <h1>Angular PDF Printing Tutorial</h1>
  <p>This is a sample HTML content to be converted to PDF.</p>
</div>

<button (click)="generatePDF()">Generate PDF</button>

Step 6: Add the Component to the App

Include the PdfPrintComponent in your application. Open the app.component.html file and add the following code to display the PDF printing component:

<app-pdf-print></app-pdf-print>

Next open app.module.ts and import PdfPrintComponent & the declarations array:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PdfPrintComponent } from './pdf-print/pdf-print.component'; // Import PdfPrintComponent

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    PdfPrintComponent, // Add PdfPrintComponent to the declarations
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 7: Run the Application

Now, you can run your Angular application using the following command:

ng serve

Open your web browser and navigate to http://localhost:4200 to see your application. Click the “Generate PDF” button to convert the HTML content to a PDF and open it in a new tab.

Conclusion

That’s it! You’ve created an Angular 16 application that can print an HTML page to PDF. You can customize the HTML content and PDF generation options to fit your specific needs.

Recommended Angular Tutorials