Creating and exporting files on device

ionic-v1
1

Newbie here,

My app has an html table that i would like the user to be able to export as PDF.
I found the jsPDF lib to match my needs when it comes to creating a pdf, and it works fine on a simple browser, however i do not know how to do this on a device.

The jsPDF has a method called save that downloads the file but i really need help on getting this to work on a device.

I am also ok with exporting the file by sending an email and i have seen the email plugin that can be used but i am not really sure how to generate the file on the device.

Any help will be great,
Elad.

1 Like
2

You can use PhoneGap File API (“cordova plugin add org.apache.cordova.file”) and pdf that is generated by jsPDF can be saved in the device’s local file system.

3

Can you provide any working demo of that app. If you have created one. I was also saving the file but it is not saving.

4

This ngCordova plugin works really well and is pretty straightforward to use: http://ngcordova.com/docs/plugins/file/

Basic steps:

  1. Install ngCordova and inject into your app: http://ngcordova.com/docs/install/

  2. Add $cordovaFile to your controller:

    .controller(‘MyCtrl’, function($scope, $cordovaFile){ … }

  3. Inside your controller, create a new file called “new_file.txt” making sure to only use $cordovaFile after the device is ready:

    document.addEventListener(‘deviceready’, function () {
    console.log(‘device is ready, lets do some file reading’);
    $cordovaFile.createFile(cordova.file.dataDirectory, “new_file.txt”, true)
    .then(function (success) {
    console.log(‘successfully created new_file’);
    }, function (error){
    console.log(‘file write error’ + error);
    }); });
    ;

I found Android much easier to debug but XCode can help a bit, in particular:
(with device attached!)
Windows > Devices > Installed Apps > click Gear Icon > Show Container > scroll through file system, under Library/NoCloud your files will be written (default path).

image

Common pitfalls to be aware of:

  1. This will ONLY work on a device, will not work in a browser ie. ionic serve.
  2. When adding new plugins I often have to install the plugin, remove the platforms(s), readd the platform(s).
5

According to my understanding this is something you need
Use “npm install”, “bower install” and “cordova plugin add org.apache.cordova.file” for getting dependencies.

GitHub Project

6

Cool but your repo still lack about readme.md could you provide one especially about plugin installation?