Created
May 3, 2019 06:21
-
-
Save kumarandena/558c8fd405c0f2758c467a7eb63de551 to your computer and use it in GitHub Desktop.
jsPDF Javascript library integration with NativeScript Angular
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Library Github Repo - https://github.com/MrRio/jsPDF | |
Integration: | |
1. Let’s create Nativescript angular project | |
npm install jspdf –save | |
npm install @types/jspdf –save | |
npm install base-64 --save | |
2. Verify whether it is installed or not | |
Package.json | |
"dependencies": { | |
"@types/jspdf": "^1.2.2", | |
"base-64": "^0.1.0", | |
"jspdf": "1.3.5" | |
} | |
3. Start using the jsPDF in component | |
//You can create a fork of jsPDF to remove the following global variables for NativeScript | |
global['window'] = { | |
'document': { | |
'createElementNS': () => { return {} } | |
} | |
}; | |
global['document'] = { | |
'createElement': (str) => { return {} } | |
}; | |
global['navigator'] = {}; | |
//Fix the variables using imports | |
var base64 = require('base-64'); | |
import * as jsPDF from 'jspdf'; | |
global['btoa'] = (str) => { | |
return base64.encode(str); | |
}; | |
global['atob'] = (bytes) => { | |
return base64.decode(bytes); | |
}; | |
global['utf8'] = {}; | |
import { File, Folder, path } from "file-system"; | |
declare var android: any; | |
//to get android downloads path | |
public basePath = android.os.Environment.getExternalStoragePublicDirectory( | |
android.os.Environment.DIRECTORY_DOWNLOADS).toString(); | |
//generate the dataurl of the resulted pdf | |
generatePdf() { | |
var doc = new jsPDF('p', 'pt', 'a4'); | |
doc.setFontSize(26); | |
doc.text(40, 40, "First PDF with NativeScript Angular using jsPDF!"); | |
let imgData = base64string; | |
doc.addImage(imgData, 'JPEG', 0, 0, 100, 100, "newCertificate", 'FAST'); | |
var base64 = doc.output('datauristring'); | |
if (base64) { | |
let sliced = base64.toString().slice(28); | |
this.savePdf(sliced); | |
} | |
} | |
//save the base64 as pdf file using file system | |
savePdf(encodedData) { | |
let folder = Folder.fromPath(path.join(this.basePath, "jsPDF Files")); | |
let tofile: File = folder.getFile('nscertificate.pdf'); | |
if (tofile) { | |
let data = android.util.Base64.decode(encodedData, android.util.Base64.DEFAULT); | |
tofile.writeSync(data, err => | |
{ | |
console.log("err :", err); | |
}); | |
} | |
} | |
4. Steps to add Image: | |
1. Add atob global variable | |
2. Add btoa global variable | |
3. Add utf8 global variable | |
4. Supply only the base64 encoded JPEG images | |
(https://www.base64-image.de/) | |
(https://parall.ax/products/jspdf) | |
(https://stackoverflow.com/questions/19072241/jspdf-not-working-with-images) | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi @kumarandena ,
unfortunately this does not work anymore, I get this exception:
at the given code, jsPDF tries to bin atob function of the global object. Do you have an idea how to fix this?