How do I convert with Angular: HTML into PDF
20,342
Solution 1
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
});
}
}
Solution 2
Firstly install this package
npm install jspdf
npm install [email protected] //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
});
}
Solution 3
You can use the library 'PrintJS' for converting html templates to pdf. https://printjs.crabbly.com/
Author by
Sternisic
Updated on July 05, 2022Comments
-
Sternisic almost 2 years
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.
-
Ulises CT almost 4 yearswhat if it's a div with variable size?
-
Abhishek Ekaanth almost 4 years@UlisesCT are you still facing this issue?
-
Sathiamoorthy over 3 yearsthank you. You know how to send the document instead of download?