Ionic | Working with jsPDF

Inhaltsverzeichnis [Anzeigen]

Introduction

The javascript library jsPDF, is a Client-side JavaScript PDF generation for everyone.

With a npm-Module, you can integrate this functionality into your Ionic App.

This Git Repository with the code for this blog is here.

Preparation

Create your empty app

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
❯ mkdir Ionic_Working-with_jsPDF
❯ cd Ionic_Working-with_jsPDF
❯ mkdir Ionic_Working-with_jsPDF ❯ cd Ionic_Working-with_jsPDF
❯ mkdir Ionic_Working-with_jsPDF
❯ cd Ionic_Working-with_jsPDF
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
❯ ionic start app sidemenu --type angular
√ Preparing directory .app in 2.63ms
√ Downloading and extracting sidemenu starter in 665.67ms
? Integrate your new app with Capacitor to target native iOS and Android? No
❯ ionic start app sidemenu --type angular √ Preparing directory .app in 2.63ms √ Downloading and extracting sidemenu starter in 665.67ms ? Integrate your new app with Capacitor to target native iOS and Android? No
❯ ionic start app sidemenu  --type angular
√ Preparing directory .app in 2.63ms
√ Downloading and extracting sidemenu starter in 665.67ms
? Integrate your new app with Capacitor to target native iOS and Android? No
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
❯ cd app
❯ cd app
❯ cd app

Install npm Module

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
❯ npm install jspdf
❯ npm install @types/jspdf
❯ npm install jspdf ❯ npm install @types/jspdf
❯ npm install        jspdf
❯ npm install @types/jspdf

oder

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
❯ yarn add jspdf
❯ yarn add @types/jspdf
❯ yarn add jspdf ❯ yarn add @types/jspdf
❯ yarn add        jspdf
❯ yarn add @types/jspdf

Start Editor and serve your app

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
❯ vscode .
❯ ionic serve
❯ vscode . ❯ ionic serve
❯ vscode .
❯ ionic serve

Add new Page for PDF functionality

Create new Page

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
❯ ionic generate page pages/PDF
❯ ionic generate page pages/PDF
❯ ionic generate page pages/PDF

Add page to sidemenu

Edit app.components.ts

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
public appPages = [
{ title: 'PDF', url: '/pdf', icon: print' },
{ title: 'Inbox', url: '/folder/Inbox', icon: 'mail', },
public appPages = [ { title: 'PDF', url: '/pdf', icon: print' }, { title: 'Inbox', url: '/folder/Inbox', icon: 'mail', },
public appPages = [
	{	title: 'PDF',	url: '/pdf',		icon: print'	},
	{	title: 'Inbox',	url: '/folder/Inbox',	icon: 'mail',	},

Add jsPDF functionality

Add jspfs reference to

<code>pages/pdf/pdf.page.ts</code>
pages/pdf/pdf.page.ts

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import { jsPDF } from 'jspdf';
import { jsPDF } from 'jspdf';
import { jsPDF } from 'jspdf';

Create a function for converting to PDF

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
public downloadPDF() {
var data = document.getElementById('printcontent') as HTMLElement;
let pdf = new jsPDF('p', 'mm', 'a4');
pdf.html(data, {
callback: (pdf) => {pdf.output('dataurlnewwindow');}
});
}
public downloadPDF() { var data = document.getElementById('printcontent') as HTMLElement; let pdf = new jsPDF('p', 'mm', 'a4'); pdf.html(data, { callback: (pdf) => {pdf.output('dataurlnewwindow');} }); }
public downloadPDF() {
	var data = document.getElementById('printcontent') as HTMLElement;

	let pdf = new jsPDF('p', 'mm', 'a4');

	pdf.html(data, {
		callback: (pdf) => {pdf.output('dataurlnewwindow');}
	});
}

Add download button

Change pages/pdf/pdfhtml

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<div>
<input type="button" value="Convert" (click)="downloadPDF()" />
</div>
<div> <input type="button" value="Convert" (click)="downloadPDF()" /> </div>
<div>
	<input type="button" value="Convert" (click)="downloadPDF()" />
</div>

Summary

A lot more examples could be found in my repository. Just create a starter app with this template and begin to play