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');
}
}
Answer from GsMalhotra on Stack OverflowVideos
ยป npm install jspdf
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.
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');
}
}
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.
Using jspdf with the latest angular cli version is really easy. Simply install jspdf from npm and use it something like this:
app.component.ts
// Note that you cannot use import jsPDF from 'jspdf' if you
// don't install jspdf types from DefinitelyTyped
let jsPDF = require('jspdf');
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
constructor() {
let doc = new jsPDF();
doc.text("Hello", 20, 20);
doc.save('table.pdf');
}
}
For old versions of angular cli based on systemjs instead of webpack
Here is a link to a description of one way to work with the angular-cli and libraries in umd or plain javascript. It basically involves using declare jsPDF: any together with importing the library in systemjs vendor files.
The way you would do using Angular-cli and Angular 4 is first add jspdf to Scripts array in .angular-cli.json
"scripts": [
"../node_modules/jspdf/dist/jspdf.min.js"
]
then in the component add the following
import * as JSPdf from 'jspdf';
then in your class
generatePdf() {
let doc = new JSPdf();
doc.text("Hello", 20, 20);
doc.save('table.pdf');
}
I was having this same problem, I was able to fix it by including html2canvas.
npm install html2canvas --save
//Since I'm using browserify I then ran
global.html2canvas = require("html2canvas");
(https://github.com/niklasvh/html2canvas)
jsPDF relies on that for the addHTML function, but I never saw that mentioned anywhere on the site until I found a bug report about it (https://github.com/MrRio/jsPDF/issues/270)
Here's my code,
$scope.printDocument = function(){
var pdf = new jsPDF('p','pt','a4');
pdf.addHTML(document.body, function() {
pdf.save('web.pdf');
});
}
I Have html2Canvas required in my service app.js, I can see that there is an addHTML function on the PDF object but it never gets into that callback function, and no errors in the console.
It appears jsPDF.addHTML doesn't get into the options.onrendered function. Trying to track through it, will update here if I find anything.
EDIT FIXED: I had installed html2canvas via npm, and had it set require in my app.js file (angular app), but it wasn't working. I then discovered 0.4.1 html2Canvas is available for bower install. Once I added that (have both loaded, too timid to remove the npm version) it works fine. Huzzah!.
Is working for me Angular 5.
To work with jspdf-autotable in angular 5, one must install jspdf and jspdf-autotable via npm
npm install jspdf --save
npm install @types/jspdf --save-dev
npm install jspdf-autotable --save
also add the jspdf and jspdf-autotable files to the scripts array in angular-cli.json
"scripts": [
"../node_modules/jspdf/dist/jspdf.min.js",
"../node_modules/jspdf-autotable/dist/jspdf.plugin.autotable.js"
],
and in component never import jspdf or jspdf-autotable just.
Forget about the following import.
import * as jsPDF from 'jspdf';
import 'jspdf-autotable';
Just use Before @Component:
declare var jsPDF: any;
Your component (related parts ):
declare var jsPDF: any;
@Component({
selector: "energy-login",
templateUrl: "./login.component.html",
styleUrls: ["./login.component.scss"]
})
export class MyComponent implements OnInit {
constructor() {}
ngOnInit() {}
downloadPDF() {
let columns = ["ID", "Name", "Country"];
let rows = [
[1, "Shaw", "Tanzania"],
[2, "Nelson", "Kazakhstan"],
[3, "Garcia", "Madagascar"],
];
let doc = new jsPDF('l', 'pt');
doc.autoTable(columns, rows); // typescript compile time error
doc.save('table.pdf');
}
}
I was able to please TypeScript like this:
import jsPDF from 'jspdf';
import 'jspdf-autotable';
import { UserOptions } from 'jspdf-autotable';
interface jsPDFWithPlugin extends jsPDF {
autoTable: (options: UserOptions) => jsPDF;
}
...
const doc = new jsPDF('portrait', 'px', 'a4') as jsPDFWithPlugin;
doc.autoTable({
head: [['Name', 'Email', 'Country']],
body: [
['David', '[email protected]', 'Sweden'],
['Castille', '[email protected]', 'Norway']
]
});
Works in Angular 7 (also works in Angular 14)