How do I convert with Angular: HTML into PDF

Question

I'm using Angular and I wanna convert a table from html into pdf, this is my code in component.ts:

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');
}

and my html code is:

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

I actually can download a pdf, but it is completely white.

Possible duplicate of [Export HTML table to pdf using jspdf](https://stackoverflow.com/questions/23035858/export-html-table-to-pdf-using-jspdf) — Cpt Kitkat, Jul 10 '19 at 05:32

score 17 · Accepted Answer · answered Jul 10 '19 at 05:07

Firstly Install this package

npm install jspdf

And to install html2canvas package.

npm install html2canvas

Import it into our component using the import statement.

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

in your TS 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   
    });  
  }  
}

what if it's a div with variable size? – Ulises CT Jun 18 '20 at 07:34 — Ulises CT, Jun 18 '20 at 07:34
@UlisesCT are you still facing this issue? – Abhishek Ekaanth Jul 11 '20 at 08:43 — Abhishek Ekaanth, Jul 11 '20 at 08:43

score 1 · Answer 2 · answered Jul 10 '19 at 04:33

1

You can use the library 'PrintJS' for converting html templates to pdf. https://printjs.crabbly.com/

answered Jul 10 '19 at 04:33

Ashish S

638
6
14

score 1 · Answer 3 · edited Jan 21 '20 at 12:39

Firstly install this package

npm install jspdf
npm install html2canvas@1.0.0-alpha.12 //working with this html2canvas version.

Import it into our component using the import statement(app.component.ts).

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

Add app.component.html

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

Add app.component.ts

Screen()
{  
    var data = document.getElementById('content');  
    html2canvas(data).then(canvas => {  
        // Few necessary setting options  
        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 page of PDF  
        var position = 0;  
        pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)  
        pdf.save('MYPdf.pdf'); // Generated PDF   
    });  
}

thank you. You know how to send the document instead of download? — Sathiamoorthy, Nov 05 '20 at 18:39

score 0 · Answer 4 · edited Jun 23 '23 at 20:36

0

Here is StackBlitz Demo Code

Hope this will help

edited Jun 23 '23 at 20:36

dvdmn

6,456
7
44
52

answered Oct 25 '19 at 09:53

DeC

2,226
22
42

How do I convert with Angular: HTML into PDF

4 Answers4