I have done it, after doing lot of R&D , their are few steps to follow as below : Install :
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');
}
}
» npm install jspdf
I cannot use jsPDF with Angular 10 - Stack Overflow
Problem with jspdf library to generate a pdf file
How do you generate high-quality PDFs with Angular?
how to set top and bottom margin in .HTML using jspdf
Videos
I have done it, after doing lot of R&D , their are few steps to follow as below : Install :
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');
}
}
Old question but this is an alternative solution that I got up and running in my angular app. I ended up modifying this jsPDF solution to work without using the ionic/cordova CLI.
npm install jspdf --save
npm install @types/jspdf --save
npm install html2canvas --save
npm install @types/html2canvas --save
Add an id to whichever div contains the content you want to generate the PDF
<div id="html2Pdf">your content here</div>
Import the libraries
import * as jsPDF from 'jspdf';
import * as html2canvas from 'html2canvas';
Add the method for generating the PDF
generatePdf() {
const div = document.getElementById("html2Pdf");
const options = {background: "white", height: div.clientHeight, width: div.clientWidth};
html2canvas(div, options).then((canvas) => {
//Initialize JSPDF
let doc = new jsPDF("p", "mm", "a4");
//Converting canvas to Image
let imgData = canvas.toDataURL("image/PNG");
//Add image Canvas to PDF
doc.addImage(imgData, 'PNG', 20, 20);
let pdfOutput = doc.output();
// using ArrayBuffer will allow you to put image inside PDF
let buffer = new ArrayBuffer(pdfOutput.length);
let array = new Uint8Array(buffer);
for (let i = 0; i < pdfOutput.length; i++) {
array[i] = pdfOutput.charCodeAt(i);
}
//Name of pdf
const fileName = "example.pdf";
// Make file
doc.save(fileName);
});
}
I found this solution worked well for my web app and was beneficial as I have control over when I want to generate the PDF (after receiving data asynchronously). As well, I didn't need install any libraries globally.
After trying so many different solutions for this issue now I've found that both the addHTML and fromHTML is depreciated in latest versions of jspdf and they are replaced with just html. For those who are seeking for a better solution to work with jspdf and Angular 10 here is what looks working and a better result that I've found so far.
To import jspdf version (2.x.x), just simply do: import { jsPDF } from 'jspdf';.
You won't need to include any of the dependencies into angular.json scripts like you would do in previous versions. And if you add scripts of jspdf or html2canvas insideindex.html, also remove them. By running npm install jspdf it also install the html2canvas which is also dynamically imported by jspdf.
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { jsPDF } from 'jspdf';
.....
@ViewChild('couponPage', { static: true }) couponPage: ElementRef;
.......
openPDF(): void {
const DATA = this.couponPage.nativeElement;
const doc: jsPDF = new jsPDF("p", "mm", "a4");
doc.html(DATA, {
callback: (doc) => {
doc.output("dataurlnewwindow");
}
});
}
Though for me still using
doc.html()method, it wouldn't use thecssstyle that I used for my page.
After working with the OP for a short time on a stackblitz, it seems the main problem was that the usage of the library changed between versions 1.3.5 (the one used in the examples) to 2.1.0 (the one he was using). I am adding this answer so that it may provide a clue to future solution seekers who suffer from a similar problem.
Hi, I am trying to generate a pdf with jspdf and html2canvas, I have followed the documentation but when I try to download it I always get an error in console.
This is my function in the component.ts
donwloadPDF() {
// Extraemos el
const DATA: any = document.getElementById('htmlData');
const doc = new jsPDF('p', 'pt', 'a4');
const options = {
background: 'white',
scale: 3
};
html2canvas(DATA, options).then((canvas) => {
const img = canvas.toDataURL('image/PNG');
// Add image Canvas to PDF
const bufferX = 15;
const bufferY = 15;
const imgProps = (doc as any**).getImageProperties(img);**
const pdfWidth = doc.internal.pageSize.getWidth() - 2 * bufferX;
const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
doc.addImage(img, 'PNG', bufferX, bufferY, pdfWidth, pdfHeight, undefined, 'FAST');
return doc;
}).then((docResult) => {
docResult.save(`${new Date().toISOString()}_tutorial.pdf`);
});
}
And this is the error I get on the console
Has anyone had something similar?
Thanks
» npm install jspdf-autotable