ionic 3 pdfmake not working in mobile device - ionic-framework

Question

In my application,there is a screen for generating PDF .In web browser, the PDF is getting downloaded, content is displayed but in the mobile it is getting downloaded and saved in PDF format and the content is not getting written to the PDF.
Plugin used: cordova pdfMake
Here is the code for reference
createPdf(val1,val2,val3) {
this.Descr=val1;
this.ValueDescr=val2;
this.VisionDescr=val3;
var docDefinition = {
content: [
{ text: 'Family Description', style: 'header' },
{ },
{ text: 'Family History :', style: 'subheader' },
{ text: this.Descr ,style: 'story', margin: [20, 0, 0, 30] },
{ text: 'Family Values :', style: 'subheader' },
{ text: this.ValueDescr ,style: 'story', margin: [20, 0, 0, 30]},
{ text: 'Family Vision :', style: 'subheader' },
{ text: this.VisionDescr ,style: 'story', margin: [20, 0, 0, 30] },
],
styles: {
header: {
fontSize: 18,
bold: true,
alignment: 'center',
},
subheader: {
fontSize: 14,
bold: true,
margin: [0, 15, 0, 0]
},
story: {
fontSize: 12,
width: '50%',
}
}
}
if(this.Descr || this.ValueDescr || this.VisionDescr)
{
this.pdfObj = pdfMake.createPdf(docDefinition);
// alert("PDF has been created successfully.Kindly wait for it to be downloaded...")
this.downloadPdf(this.pdfObj);
}
}
downloadPdf(val) {
this.pdfObj = val;
if (this.platform.is('cordova')) {
this.pdfObj.getBuffer((buffer) => {
var blob = new Blob([buffer], { type: 'application/pdf' });
// Save the PDF to the data Directory of our App
this.file.writeFile(this.file.externalDataDirectory, 'familydescription.pdf', blob, { replace: true }).then(fileEntry => {
// Open the PDf with the correct OS tools
this.fileOpener.open(this.file.externalDataDirectory + 'familydescription.pdf', 'application/pdf');
})
});
} else {
// On a browser simply use download!
this.pdfObj.download();
}
}
Ionic Information
Ionic:
ionic (Ionic CLI) : 4.2.1 (/usr/local/lib/node_modules/ionic)
Ionic Framework : ionic-angular 3.9.2
#ionic/app-scripts : 3.2.0
Cordova:
cordova (Cordova CLI) : 8.1.2 (cordova-lib#8.1.1)
Cordova Platforms : android 7.1.2, ios 4.5.5
Cordova Plugins : cordova-plugin-ionic-keyboard 2.0.5, cordova-plugin-ionic-webview 1.1.1, (and 30 other plugins)
System:
Android SDK Tools : 26.1.1 (/Users/aligntech/Library/Android/sdk/)
ios-deploy : 1.9.4
NodeJS : v10.13.0 (/usr/local/bin/node)
npm : 6.4.1
OS : macOS
Xcode : Xcode 10.1 Build version 10B61

Answer 1

I found the solution for the above problem I posted it. I solved it by handling it in a different way
createPdf(val1,val2,val3) {
let self = this;
this.Descr=val1;
this.ValueDescr=val2;
this.VisionDescr=val3;
var docDefinition = {
content: [
{ text: 'Family Description', style: 'header' },
{ },
{ text: 'Family History :', style: 'subheader' },
{ text: this.Descr ,style: 'story', margin: [20, 0, 0, 30] },
{ text: 'Family Values :', style: 'subheader' },
{ text: this.ValueDescr ,style: 'story', margin: [20, 0, 0, 30]},
{ text: 'Family Vision :', style: 'subheader' },
{ text: this.VisionDescr ,style: 'story', margin: [20, 0, 0, 30] },
],
styles: {
header: {
fontSize: 18,
bold: true,
alignment: 'center',
},
subheader: {
fontSize: 14,
bold: true,
margin: [0, 15, 0, 0]
},
story: {
fontSize: 12,
width: '50%',
}
}
}
if(this.Descr || this.ValueDescr || this.VisionDescr)
{
this.pdfObj = pdfMake.createPdf(docDefinition);
pdfMake.createPdf(docDefinition).getBuffer(function (buffer) {
let utf8 = new Uint8Array(buffer);
let binaryArray = utf8.buffer;
self.saveToDevice(binaryArray,"familydescription.pdf")
});
// this.downloadPdf(this.pdfObj);
}
}
saveToDevice(data:any,savefile:any){
let self = this;
self.file.writeFile(self.file.externalDataDirectory, savefile, data, {replace:false});
const toast = self.toastCtrl.create({
message: 'File saved to your device',
duration: 3000,
position: 'top'
});
toast.present();
}
and I found an issue the bug is with file opener which I used in previous code!
I Referred above code from this website https://medium.com/#rakeshuce1990/ionic-how-to-create-pdf-file-with-pdfmake-step-by-step-75b25aa541a4 use this link for detailed reference.