For a project I'm working on I need to be able to generate a PDF of the page the user is currently on, for which I'll use jspdf. Since I have a HTML I need to generate a PDF with, I'll need the addHTML() function. There are a lot of topic about this, saying
You'll either need to use
html2canvasorrasterizehtml.
I've chosen to use html2canvas. This is what my code looks like at the moment:
import { Injectable, ElementRef, ViewChild } from '@angular/core';
import * as jsPDF from 'jspdf';
import * as d3 from 'd3';
import * as html2canvas from 'html2canvas';
@Injectable ()
export class pdfGeneratorService {
@ViewChild('to-pdf') element: ElementRef;
GeneratePDF () {
html2canvas(this.element.nativeElement, <Html2Canvas.Html2CanvasOptions>{
onrendered: function(canvas: HTMLCanvasElement) {
var pdf = new jsPDF('p','pt','a4');
pdf.addHTML(canvas, function() {
pdf.save('web.pdf');
});
}
});
}
}
When this function is called, I get a console error:
EXCEPTION: Error in ./AppComponent class AppComponent - inline template:3:4 caused by: You need either https://github.com/niklasvh/html2canvas or https://github.com/cburgmer/rasterizeHTML.js
Why exactly is this? I give a canvas as parameter and it still says I need to use html2canvas.
What I found worked was adding:
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
to the index.html file (it could presumably be elsewhere).
I then used:
const elementToPrint = document.getElementById('foo'); //The html element to become a pdf
const pdf = new jsPDF('p', 'pt', 'a4');
pdf.addHTML(elementToPrint, () => {
doc.save('web.pdf');
});
Which no longer uses html2canvas in the code.
You can then remove the following import:
import * as html2canvas from 'html2canvas';
In case someone prefer not to use cdn scripts & would like to use a more (angular) way, this worked for me in Angular 6:
Using this way will give you better support & autocomplete in the editor & will help you avoid depending on cdn scripts (if you wanna avoid them, like me)
Based on the excellent answer here & since it was hard for me to find that answer, I am re-sharing what was stated in it & helped me use jsPDF in Angular 6 (all credit goes to the original author of this answer)
You should run these cmds:
npm install jspdf --save
typings install dt~jspdf --global --save
npm install @types/jspdf --save
Add following in angular-cli.json:
"scripts": [ "../node_modules/jspdf/dist/jspdf.min.js" ]
html:
<button (click)="download()">download </button>
component ts:
import { Component, OnInit, Inject } from '@angular/core';
import * as jsPDF from 'jspdf'
@Component({
...
providers: [
{ provide: 'Window', useValue: window }
]
})
export class GenratePdfComponent implements OnInit {
constructor(
@Inject('Window') private window: Window,
) { }
download() {
var doc = new jsPDF();
doc.text(20, 20, 'Hello world!');
doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
doc.addPage();
doc.text(20, 20, 'Do you like that?');
// Save the PDF
doc.save('Test.pdf');
}
}