What is the best way to convert HTML to PDF using Angular?

Question

What is the best way to convert HTML to PDF using Angular?

Currently, I am working with Angular and I have a requirement to convert an HTML table into a PDF format. Below is the code snippet from my component.ts file:

downloadPDF() {
    const doc = new jsPDF();
    const specialElememtHandlers = {
        '#editor'(element, renderer) {
            return true;
        }
    };

    doc.fromHTML(this.content.nativeElement.innerHTML, 15, 15, {
        width: 190,
        elementHandlers: specialElememtHandlers
    });
    doc.save('test.pdf');
}

Here is my corresponding HTML code:

<button (click)="downloadPDF()">Save as PDF</button>

Although I can successfully download a PDF file, unfortunately, it appears completely white.

angular typescript jspdf html-to-pdf

Answer 1

Answer №1

To begin, start by installing the following packages:

npm install jspdf

Next, you'll also need to install the html2canvas package.

npm install html2canvas

After installation, import these packages into your component using the import statement.

import * as jspdf from 'jspdf';  
import html2canvas from 'html2canvas';

In your TypeScript code:

import { Component, OnInit, ElementRef ,ViewChild} from '@angular/core';  
import * as jspdf from 'jspdf';  
import html2canvas from 'html2canvas';  

@Component({  
  selector: 'app-htmltopdf',  
  templateUrl: './htmltopdf.component.html',  
  styleUrls: ['./htmltopdf.component.css']  
})  
export class HtmltopdfComponent{  
  public captureScreen()  
  {  
    var data = document.getElementById('contentToConvert');  //Id of the table
    html2canvas(data).then(canvas => {  
      // Few necessary setting options  
      let imgWidth = 208;   
      let pageHeight = 295;    
      let imgHeight = canvas.height * imgWidth / canvas.width;  
      let heightLeft = imgHeight;  

      const contentDataURL = canvas.toDataURL('image/png')  
      let pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF  
      let position = 0;  
      pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)  
      pdf.save('MYPdf.pdf'); // Generated PDF   
    });  
  }  
}

Answer 2

To begin, start by installing the following packages:

npm install jspdf

Next, you'll also need to install the html2canvas package.

npm install html2canvas

After installation, import these packages into your component using the import statement.

import * as jspdf from 'jspdf';  
import html2canvas from 'html2canvas';

In your TypeScript code:

import { Component, OnInit, ElementRef ,ViewChild} from '@angular/core';  
import * as jspdf from 'jspdf';  
import html2canvas from 'html2canvas';  

@Component({  
  selector: 'app-htmltopdf',  
  templateUrl: './htmltopdf.component.html',  
  styleUrls: ['./htmltopdf.component.css']  
})  
export class HtmltopdfComponent{  
  public captureScreen()  
  {  
    var data = document.getElementById('contentToConvert');  //Id of the table
    html2canvas(data).then(canvas => {  
      // Few necessary setting options  
      let imgWidth = 208;   
      let pageHeight = 295;    
      let imgHeight = canvas.height * imgWidth / canvas.width;  
      let heightLeft = imgHeight;  

      const contentDataURL = canvas.toDataURL('image/png')  
      let pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF  
      let position = 0;  
      pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)  
      pdf.save('MYPdf.pdf'); // Generated PDF   
    });  
  }  
}

Answer 3

Answer №2

If you need to convert HTML templates to PDF, consider utilizing the 'PrintJS' library. Check out PrintJS here!

Answer 4

If you need to convert HTML templates to PDF, consider utilizing the 'PrintJS' library. Check out PrintJS here!

Answer 5

Answer №3

Start by installing the following package:

npm install jspdf
npm install <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cca4b8a1a0feafada2baadbf8cfde2fce2fce1ada0bca4ade2fdfe">[email protected]</a> //make sure to use this specific html2canvas version.

Next, import it into your component using the import statement(app.component.ts).

import * as jspdf from 'jspdf';  
import html2canvas from 'html2canvas';

Include in app.component.html

<div class="abc" id="content">
    <h1>Hello World!</h1>
    <button (click)="Screen()">Create PDF</button>
</div>

Now add functionality to app.component.ts

Screen()
{  
    var data = document.getElementById('content');  
    html2canvas(data).then(canvas => {  
        // Necessary settings  
        var imgWidth = 208;   
        var pageHeight = 295;    
        var imgHeight = canvas.height * imgWidth / canvas.width;  
        var heightLeft = imgHeight;  

        const contentDataURL = canvas.toDataURL('image/png')  
        let pdf = new jspdf('p', 'mm', 'a4'); // A4 size PDF page  
        var position = 0;  
        pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)  
        pdf.save('MyPDF.pdf'); // Downloaded PDF   
    });  
}

Answer 6

Start by installing the following package:

npm install jspdf
npm install <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cca4b8a1a0feafada2baadbf8cfde2fce2fce1ada0bca4ade2fdfe">[email protected]</a> //make sure to use this specific html2canvas version.

Next, import it into your component using the import statement(app.component.ts).

import * as jspdf from 'jspdf';  
import html2canvas from 'html2canvas';

Include in app.component.html

<div class="abc" id="content">
    <h1>Hello World!</h1>
    <button (click)="Screen()">Create PDF</button>
</div>

Now add functionality to app.component.ts

Screen()
{  
    var data = document.getElementById('content');  
    html2canvas(data).then(canvas => {  
        // Necessary settings  
        var imgWidth = 208;   
        var pageHeight = 295;    
        var imgHeight = canvas.height * imgWidth / canvas.width;  
        var heightLeft = imgHeight;  

        const contentDataURL = canvas.toDataURL('image/png')  
        let pdf = new jspdf('p', 'mm', 'a4'); // A4 size PDF page  
        var position = 0;  
        pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)  
        pdf.save('MyPDF.pdf'); // Downloaded PDF   
    });  
}

Answer 7

Answer №4

Check out this StackBlitz Demo Code

I trust this will be beneficial

Answer 8

Check out this StackBlitz Demo Code

I trust this will be beneficial

What is the best way to convert HTML to PDF using Angular?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Utilizing Lodash debounce in VueJs watch feature while incorporating Typescript

The ipcRenderer is failing to be activated

Navigating with dynamic angular2 routes?

Why is it that the changes I make in the parent component do not reflect in my Angular component?

After importing RxJS, the error "toPromise is not a function" is encountered

Modify the view to display the router outlet as a sidebar

Troubleshooting Angular form validation and ngClass in the presence of multiple conditions

Looking for a way to detect changes in a select menu using Angular?

The elements mat-toolbar, mat-sidenav, and mat-sidenav-container are unrecognized

Is there a way to incorporate an icon into the heading of an accordion-group in ngx-bootstrap?

Making a synchronous call to a web API using JQuery

Describing an Object with some typed properties

The Http.get() function is running smoothly, yet encountering issues when it comes to functionality within the build (Release/Debug)

Having trouble with Angular routing when attempting to directly access a specific URL path?

Webpack 5 is failing to bundle re-exports correctly

An error occurred when trying to access object references within a function

Angular 14 introduces a new feature that automatically joins open SVG paths when dynamically rendered from a data object

Checking to see if a method in an Angular component is invoked during ngOninit()?

In Typescript, try/catch blocks do not capture return values

Optimal approach for designing interfaces