How to properly use jsPDF library
you can use pdf from html as follows,
Step 1: Add the following script to the header
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
or download locally
Step 2: Add HTML script to execute jsPDF code
Customize this to pass the identifier or just change #content to be the identifier you need.
<script>
function demoFromHTML() {
var pdf = new jsPDF('p', 'pt', 'letter');
// source can be HTML-formatted string, or a reference
// to an actual DOM element from which the text will be scraped.
source = $('#content')[0];
// we support special element handlers. Register them with jQuery-style
// ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
// There is no support for any other type of selectors
// (class, of compound) at this time.
specialElementHandlers = {
// element with id of "bypass" - jQuery style selector
'#bypassme': function (element, renderer) {
// true = "handled elsewhere, bypass text extraction"
return true
}
};
margins = {
top: 80,
bottom: 60,
left: 40,
width: 522
};
// all coords and widths are in jsPDF instance's declared units
// 'inches' in this case
pdf.fromHTML(
source, // HTML string or DOM elem ref.
margins.left, // x coord
margins.top, { // y coord
'width': margins.width, // max width of content on PDF
'elementHandlers': specialElementHandlers
},
function (dispose) {
// dispose: object with X, Y of the last line add to the PDF
// this allow the insertion of new lines after html
pdf.save('Test.pdf');
}, margins
);
}
</script>
Step 3: Add your body content
<a href="javascript:demoFromHTML()" class="button">Run Code</a>
<div id="content">
<h1>
We support special element handlers. Register them with jQuery-style.
</h1>
</div>
Refer to the original tutorial
See a working fiddle
How to use jsPDF with angular 2
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');
}
}
I cannot use jsPDF with Angular 10
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 thecss
style that I used for my page.
Typescript - how to correctly use jsPDF in Angular2?
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.
Using jspdf library How to set a logo on a PDF through API
I use this method
var img = new Image()
img.src = '../../assets/arrow.png'
var doc = new jsPDF("p", "pt", "a4")
doc.addImage(img, 40, 30, 100, 76)
Related Topics
Navbar Dropdown (Collapse) Is Not Working in Bootstrap 5
Changing Source on Html5 Video Tag
Dynamically Set Value of a File Input
Why I Have to Put All the Script to Index.Html in Jquery Mobile
What Is the Most Efficient Way to Create HTML Elements Using Jquery
How to Use Checkbox Inside Select Option
Remove CSS Class from Element With JavaScript (No Jquery)
Jquery Document.Createelement Equivalent
How to Communicate Between Iframe and the Parent Site
Is It Wrong to Place the ≪Script≫ Tag After the ≪/Body≫ Tag
How to Dynamically Change a Web Page'S Title
How to Append Text to a '≪Div≫'
Reading File Contents on the Client-Side in JavaScript in Various Browsers
Make Iframe Automatically Adjust Height According to the Contents Without Using Scrollbar
When to Use Functional Setstate
Do Html5 Custom Data Attributes "Work" in Ie 6