ionic 3 pdfmake not working in mobile device

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.