How to Convert HTML Page to PDF in Angular 17

To convert html page to pdf file in angular; Just open your application with cmd and install html2canvas, jspdf module in it, then create a function to generate html page to PDF file & bind it with html template in your applications.

It is very easy to convert HTML pages to PDF files in Angular application, for this you can use html2canvas, jspdf modules, which are great modules to convert HTML pages to PDF. And along with this you can also generate for download it.

Angular Convert HTML Page to PDF File

Using the below-given steps, you can easily convert html page or file to pdf file in angular applications:

Step 1 – Set up an Angular project

If you haven’t already, you’ll need to install Angular CLI to create a new Angular project. Open your terminal or cmd and run the following commands:

ng new my-new-app --no-standalone

Step 2 – Install Required Modules

To run the following command on cmd or terminal window to install html2canvas, jspdf module in your application:

npm install html2canvas jspdf --save

Step 3 – Use the PDF Modules in a component

Open the app.component.ts file from the src/app/ folder, and then import the PDF module and create the generatePDF function in it and bind it to the HTML template like the following:

import { Component } from '@angular/core';
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

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

  generatePDF() {
    const element = document.getElementById('contentToConvert');
    if (!element) {
      console.error('Element not found');
      return;
    }

    html2canvas(element).then((canvas) => {
      const imgData = canvas.toDataURL('image/png');
      const pdf = new jsPDF('p', 'mm', 'a4'); // Portrait, millimeters, A4 size
      const width = pdf.internal.pageSize.getWidth();
      const height = pdf.internal.pageSize.getHeight();
      pdf.addImage(imgData, 'PNG', 0, 0, width, height);
      pdf.save('converted-document.pdf');
    });
  }
}

Step 4 – Create HTML Component

Open the app.component.html file in the src/app folder, and then create HTML with generate pdf button in it like the following:

<h1>how to convert html to pdf in angular - Tutsmake.com</h1>

<div id="contentToConvert">
  <!-- Your HTML content to convert -->
  <h1>Hello, PDF!</h1>
  <p>This is a paragraph in the PDF.</p>
</div>

<button (click)="generatePDF()">Convert to PDF</button>

Step 5 – Run the application

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

ng serve

Visit http://localhost:4200/ in your web browser, and you should see the “Download Pdf” button. When you click the button, it will generate a PDF file to html page.

Conclusion

You have learned with the help of the tutorial how to convert html page to pdf file in angular applications.

Recommended Angular Posts