Ionic 3: PDFmake not working on real devices

Question

In my application, there is a screen for generating PDFs. On the web browser, the PDF is getting downloaded, the content is displayed but on 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

import { Component } from '@angular/core';
import { NavController, Platform, NavParams } from 'ionic-angular';
import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
pdfMake.vfs = pdfFonts.pdfMake.vfs;
import {  File } from '@ionic-native/file';
import {  FileOpener } from '@ionic-native/file-opener';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  letterObj = {
    to: '',
    from: '',
    text: ''
  }
  public signatureImage : any;
  pdfObj = null;
  constructor(public navCtrl: NavController,private plt: Platform, 
    private file: File, private fileOpener: FileOpener,public navParams:NavParams ) {
    this.signatureImage = navParams.get('signatureImage');
  }
  createPdf() {
    var docDefinition = {
      content: [
        { text: 'REMINDER', style: 'header' },
        { text: new Date().toTimeString(), alignment: 'right' },

        { text: 'From', style: 'subheader' },
        { text: this.letterObj.from },

        { text: 'To', style: 'subheader' },
        this.letterObj.to,
        { text: this.letterObj.text, style: 'story', margin: [0, 20, 0, 20] },
        {
          image: this.signatureImage , style: 'foo',
          fit: [100, 100] ,alignment:'right'
          },
        // {
        //   ul: [
        //     'Bacon',
        //     'Rips',
        //     'BBQ',
        //   ]
        // }
      ],
      styles: {
        header: {
          fontSize: 18,
          bold: true,
        },
        subheader: {
          fontSize: 14,
          bold: true,
          margin: [0, 15, 0, 0]
        },
        story: {
          italic: true,
          alignment: 'center',
          width: '50%',
        },
        foo:{
          position: 'absolute',
          top: "100%",
          right: '100%',
        }
      }
    }
    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.documentViewer.viewDocument(this.pdfObj,'application/pdf',{});
  this.fileOpener.open(this.pdfObj, 'application/pdf')
  .then(() => console.log('File is opened'))
  .catch(e => console.log('Error opening file', e));
  }

  downloadPdf() {
    if (this.plt.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.dataDirectory, 'myletter.pdf', blob, { replace: true }).then(fileEntry => {
          // Open the PDf with the correct OS tools
          this.fileOpener.open(this.file.dataDirectory + 'myletter.pdf', 'application/pdf');
        })
      });
    } else {
      // On a browser simply use download!
      this.pdfObj.download();
    }
  }

  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();
    console.log('file saved')
    }
}

I am using "pdfmake": "^0.1.54"

Answer 1

finally, i fix the bug. my fileopener plugin version doesn't support the ionic -3. i changed plugin version