Is it possible to save an Excel file to ios device using cordova/phonegap datatables buttons?

Question

In my app I have a dynamically displayed table using datatables and have the 'csv' and 'excel' buttons enabled. On the ios simulator the Excel file opens, but there are no options to save it etc. Is it possible to download the file to the device? When I use the datatables buttons through a typical website the file gets downloaded automatically in the browser.

Sorry, I'm new to phonegap etc., so my apologies if this is a stupid question.

Thanks for any advice you can provide.

Answer 1

By using a plugin: cordova-plugin-file you can save to the documents directory "cordova.file.documentsDirectory". By default this directory is shared with iCloud, so a file saved here could be opened through the ios File folder and a user could then select the files and hit the share icon to open with the appropriate app, such as Numbers etc.

In order to turn on iCloud you have to pay the developer fee to Apple and select the options to do so. I found the article "Working with the Files App in iOS 11" to be helpful in starting this process.

I had issues saving the Excel file to the device using datatables-buttons, but I was able to do so as a .csv file by updating datatables.js.

In your platform datatables.js file:

//In your datatables file go to the following section:

//
// CSV export
//
DataTable.ext.buttons.csvHtml5 = {
....
  //comment out
  /*
  _saveAs(
   new Blob( [output], {type: 'text/csv'+charset} ),
   info.filename,
   true
  );
  */
  //add a call to this new function
  saveToDeviceDocuments(info.filename, output)
....
}

//add the function somewhere
//<!-- Save CSV file to iOS Files -->
saveToDeviceDocuments = (filename, csvText) => {
  document.addEventListener('deviceready', onDeviceReady, false);
  var logOb;
  
  function fail(e) {
      console.log("FileSystem Error");
      console.dir(e);
  }

  function onDeviceReady() {
    window.resolveLocalFileSystemURL(cordova.file.documentsDirectory, function(dir) {
      console.log("got main dir =" + dir);
      dir.getFile(filename, {create:true}, function(file) {
        console.log("got the file", file);
        logOb = file;
        writeLog(csvText);            
      });
    });
  }

  function writeLog(str) {
    if(!logOb) return;
    logOb.createWriter(function(fileWriter) {     
      fileWriter.seek(fileWriter.length);    
      var blob = new Blob([str], {type:'text/plain'});
      fileWriter.write(blob);
      console.log("ok, in theory i worked");
      $(".buttons-csv").html("Spreadsheet saved to files!")
    }, fail);
  }

  function justForTesting() {
    logOb.file(function(file) {
      var reader = new FileReader();
      reader.onloadend = function(e) {
        console.log(this.result);
      };
      reader.readAsText(file);
    }, fail);
  }

  setTimeout(justForTesting, 2000)
}

(Thanks to Raymond Camdon for his article "Cordova Example: Writing to a file", which helped with the code)

Hopefully this will be helpful to someone, as a new hobbyist developer it took me a long time to put these clues together. I wish I could have saved it in Excel format, but I couldn't find any way to update _jszip to save anywhere other than in the browser.