Pdf-Make not working on Device

Ionic Framework ionic-v3
1

Hey,

currently I am adding the plugin PdfMake (https://ionicacademy.com/create-pdf-files-ionic-pdfmake/) to my app.
So far, it is working perfectly in my Browser (ionic serve -c) (it´s creating and downloading the pdf), but in an APK it isn´t working.
I don´t know whether it creates the pdf or not, but sure is that it isnt saving it or at least displaying. So if I trigger the pdf-generate and pdf-download function nothing happens.
I am building the app as “ionic cordova build --prod android”…
It isn´t working in the Ionic DevApp as well, but here due to console.log I can see that both functions are triggered.

This is my code:

import { NavController, NavParams, Platform } 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';

...other imports...

export class pdfPage{

pdfObj = null;

  constructor(private platform: Platform, public navCtrl: NavController, public navParams: NavParams, private file: File, private fileOpener: FileOpener) {
  }

obj:any;
content = ["test1", "test2", "test3", "test4"];

  createPdf() {
    console.log("CreatePdf() triggered")
    var docDefinition = {
      content: {
        margin: [15, 5, 15, 15],
        table: {

        widths: [ '*', '*', '*', '*' ],

        body: this.content
      }  
        },
      styles: {
        header: {
          fontSize: 18,
          bold: true,
        },
        subheader: {
          fontSize: 14,
          bold: true,
          margin: [0, 15, 0, 0]
        },
        story: {
          italic: true,
          alignment: 'center',
          width: '50%',
        }
      }
    }
    this.pdfObj = pdfMake.createPdf(docDefinition);
    this.downloadPdf();
  }

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

So with this code I expect it to create the pdf, save it and then open it automatically.
So this is the shortend code of the page, if you need to see more, just tell me.
I guess the code for the creation is correct but not the one for saving it on a device, correct me if I am wrong.

I would love to hear how I have to correct my code to get it working.

Greeings

2

console log the dataDirectory to know the path where the pdf is saving.

3

Okay, I printed the dataDirectory on a label, it is

file://data/user/0/io.ionic.starter.files/

Using my file manager, I cant find this directory or the file. Any ideas what I should do or where I could find it??

4

yes, you’ll have to change the path which is “this.file.dataDirectory” in your case…
try the below link:
https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file/

5

So if I want to save it in the android documents folder, which directory should I use??

6

Did you read the “where to save files”??
All the options are provided there.

7

I just tried “this.file.documentsDirectory”, but it isn´t working either :frowning:
Also in “New Data” I can´t find it. But not only this, it isn’t opening as well, so I guess he isn’t saving the file…

8

In that case just try “this.file.externalApplicationStorageDirectory”.

9

And are you using it on a real device or emulator??

10

Okay, now I found the pdf in “file://data/user/0/io.ionic.starter.files/” by using “this.file.dataDirectory”. The problem is then, that it still isn´t opening the file after creating.

I am testing on a real device with the apk

11

refer to this.

12

Just found the issue. In Fileopener´s plugin.xml, line 34 has to be changed.

1 Like
13

Thanks a lot for ya help.

15

Hey!
Specifically, you have to change the FileOpener plugin.xml?
thanks!

16

Olá,

Como você resolveu isso, estou com meu script e só consigo salvar e por sua vez imprimir no navegador, mais se tento utilizar pelo ionic DevApp ou se gero o APK, ele não funciona.

Segue meu home.ts

letterObj = {
to: ‘’,
from: ‘’,
text: ‘’
}

pdfObj = null;

constructor(public navCtrl: NavController, private plt: Platform, private file: File, private fileOpener: FileOpener) { }

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] },

    {
      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%',
    }
  }
}
this.pdfObj = pdfMake.createPdf(docDefinition);

}

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();
}

}

}

17

Which kind of change you are done In Fileopener´s plugin.xml, line 34.
Please share in details