You have to use as following. I had the same question for a while, but after asking the question from the developers, I found that you have to use the instance of jsPdf() as an argument of autoTable() function. Rest goes as the documentation of jsdpf.
import { Component, OnInit } from '@angular/core';
import * as jsPDF from 'jspdf';
import autoTable from 'jspdf-autotable';
const doc = new jsPDF();
const columns = [['First Column', 'Second Column', 'Third Column']];
const data = [
['Data 1', 'Data 2', 'Data 3'],
['Data 1', 'Data 2', 'Data 3']
];
autoTable(doc, {
head: columns,
body: data,
didDrawPage: (dataArg) => {
doc.text('PAGE', dataArg.settings.margin.left, 10);
}
});
doc.save('table.pdf');
Example
Source Codes
https://codesandbox.io/s/currying-pine-wjp1g?file=/src/app/app.component.ts
Live Demo
https://wjp1g.csb.app/
» npm install jspdf
You have to use as following. I had the same question for a while, but after asking the question from the developers, I found that you have to use the instance of jsPdf() as an argument of autoTable() function. Rest goes as the documentation of jsdpf.
import { Component, OnInit } from '@angular/core';
import * as jsPDF from 'jspdf';
import autoTable from 'jspdf-autotable';
const doc = new jsPDF();
const columns = [['First Column', 'Second Column', 'Third Column']];
const data = [
['Data 1', 'Data 2', 'Data 3'],
['Data 1', 'Data 2', 'Data 3']
];
autoTable(doc, {
head: columns,
body: data,
didDrawPage: (dataArg) => {
doc.text('PAGE', dataArg.settings.margin.left, 10);
}
});
doc.save('table.pdf');
Example
Source Codes
https://codesandbox.io/s/currying-pine-wjp1g?file=/src/app/app.component.ts
Live Demo
https://wjp1g.csb.app/
I found the solution, but changing to another package, PDFMaker.
Check all documentation and supported browsers.
Checkout, there's a awesome playground and one example in Angular 8.
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.
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');
}
}
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
});
}
}
You can use the library 'PrintJS' for converting html templates to pdf. https://printjs.crabbly.com/