Convert HTML Page To PDF In an Angular Application

Converting HTML pages to PDFs is a common requirement for web applications, especially those dealing with reports, invoices, or any other documents that need to be easily shared or printed. In Angular applications, this can be achieved using various libraries and tools. This article will guide you through the process of converting HTML pages to PDF in an Angular application using the popular html2canvas and jspdf libraries.

Prerequisites

Before we start, make sure you have the following installed:

1. Node.js and npm: Angular requires Node.js and npm. You can download them from here.
2. Angular CLI: If you haven’t already, install the Angular CLI globally using npm:

Step 1: Setting Up the Angular Project

First, create a new Angular project if you don’t already have one:

ng new html-to-pdf
cd html-to-pdf

Step 2: Installing Dependencies

Next, install the html2canvas and jspdf libraries. html2canvas is used to take a screenshot of the HTML content, and jspdf is used to generate the PDF.

npm install html2canvas jspdf

Step 3: Creating the HTML Content

Create an Angular component to hold the HTML content you want to convert to PDF. For example, create a new component named pdf-content:

ng generate component pdf-content

In the pdf-content.component.html file, add the HTML content:

<div id="pdf-content">
  <h1>My PDF Content</h1>
  <p>This is the content that will be converted to a PDF.</p>
</div>
<button (click)="downloadPDF()">Download PDF</button>

Step 4: Implementing the PDF Conversion Logic

In the pdf-content.component.ts file, import the necessary libraries and implement the downloadPDF method:

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

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

  constructor() { }

  downloadPDF() {
    const data = document.getElementById('pdf-content');
    if (data) {
      html2canvas(data).then(canvas => {
        const imgWidth = 208;
        const imgHeight = canvas.height * imgWidth / canvas.width;
        const contentDataURL = canvas.toDataURL('image/png');
        const pdf = new jsPDF('p', 'mm', 'a4');
        const position = 0;
        pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight);
        pdf.save('MYPdf.pdf');
      });
    }
  }
}

Step 5: Styling the Content

You can style your HTML content as needed using CSS. Add styles in the pdf-content.component.css file to ensure the PDF looks as desired.

#pdf-content {
  width: 100%;
  padding: 20px;
  border: 1px solid #ddd;
  background: #f9f9f9;
}

Step 6: Adding the Component to Your Application

Finally, include the PdfContentComponent in your application. Open app.component.html and add the component selector:

<app-pdf-content></app-pdf-content>

Conclusion

By following these steps, you can easily convert HTML content to a PDF in your Angular application. This method uses html2canvas to capture the content as an image and jspdf to generate the PDF file. You can further customize the PDF generation process by exploring more options provided by the jspdf library, such as adding headers, footers, and multiple pages.