{"id":7624,"date":"2021-01-17T18:39:23","date_gmt":"2021-01-17T17:39:23","guid":{"rendered":"https:\/\/blog.via-internet.de\/?p=7624"},"modified":"2021-01-17T18:39:23","modified_gmt":"2021-01-17T17:39:23","slug":"ionic-working-with-jspdf","status":"publish","type":"post","link":"https:\/\/via-internet.de\/blog\/2021\/01\/17\/ionic-working-with-jspdf\/","title":{"rendered":"Ionic | Working with jsPDF"},"content":{"rendered":"\n

Introduction<\/h1>\n\n\n\n

The javascript library jsPDF<\/a>, is a Client-side JavaScript PDF generation for everyone.<\/em><\/p>\n\n\n\n

With a npm-Module, you can integrate this functionality into your Ionic App.<\/p>\n\n\n\n

This Git Repository with the code for this blog is here<\/a>.<\/p>\n\n\n\n

Preparation<\/h1>\n\n\n\n

Create your empty app<\/h3>\n\n\n\n
\u276f mkdir Ionic_Working-with_jsPDF\n\u276f cd Ionic_Working-with_jsPDF<\/pre>\n\n\n\n
\u276f ionic start app sidemenu  --type angular\n\u221a Preparing directory .app in 2.63ms\n\u221a Downloading and extracting sidemenu starter in 665.67ms\n? Integrate your new app with Capacitor to target native iOS and Android? No<\/pre>\n\n\n\n
\u276f cd app<\/pre>\n\n\n\n
Install npm Module<\/h3>\n\n\n\n
\u276f npm install        jspdf\n\u276f npm install @types\/jspdf<\/pre>\n\n\n\n
oder<\/p>\n\n\n\n
\u276f yarn add        jspdf\n\u276f yarn add @types\/jspdf<\/pre>\n\n\n\n
Start Editor and serve your app<\/h3>\n\n\n\n
\u276f vscode .\n\u276f ionic serve<\/pre>\n\n\n\n
Add new Page for PDF functionality<\/h2>\n\n\n\n
Create new Page<\/h3>\n\n\n\n
\u276f ionic generate page pages\/PDF<\/pre>\n\n\n\n
Add page to sidemenu<\/h3>\n\n\n\n
Edit app.components.t<\/code>s<\/p>\n\n\n\n
public appPages = [\n\t{\ttitle: 'PDF',\turl: '\/pdf',\t\ticon: print'\t},\n\t{\ttitle: 'Inbox',\turl: '\/folder\/Inbox',\ticon: 'mail',\t},<\/pre>\n\n\n\n
Add jsPDF functionality<\/h3>\n\n\n\n
Add jspfs reference to pages\/pdf\/pdf.page.ts<\/code><\/code><\/p>\n\n\n\n
import { jsPDF } from 'jspdf';<\/pre>\n\n\n\n
Create a function for converting to PDF<\/p>\n\n\n\n
public downloadPDF() {\n\tvar data = document.getElementById('printcontent') as HTMLElement;\n\n\tlet pdf = new jsPDF('p', 'mm', 'a4');\n\n\tpdf.html(data, {\n\t\tcallback: (pdf) => {pdf.output('dataurlnewwindow');}\n\t});\n}<\/pre>\n\n\n\n
Add download button<\/h2>\n\n\n\n
Change pages\/pdf\/pdfhtml<\/code><\/p>\n\n\n\n
<div>\n\t<input type=\"button\" value=\"Convert\" (click)=\"downloadPDF()\" \/>\n<\/div><\/pre>\n\n\n\n
Summary<\/h1>\n\n\n\n
A lot more examples could be found in my repository.<\/a> Just create a starter app with this template and begin to play<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
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 Install npm Module oder Start Editor and serve your app Add new Page for PDF functionality Create new Page Add page to sidemenu Edit app.components.ts Add jsPDF functionality Add jspfs reference to pages\/pdf\/pdf.page.ts Create a function for converting to PDF Add download button Change pages\/pdf\/pdfhtml Summary A lot more examples could be found in my repository. Just create a starter app […]<\/p>\n","protected":false},"author":1,"featured_media":7631,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[98,34],"tags":[],"class_list":["post-7624","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ionic","category-ionic-3"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/7624","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/comments?post=7624"}],"version-history":[{"count":0,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/7624\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/media?parent=7624"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/categories?post=7624"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/tags?post=7624"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}