How to Generate and Share PDF on Android/IOS Device using jsPDF for PDF and SharePicker for Sharing in Ionic 4

Question

home.html

<ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button (click)="sharePicker()">
      <ion-icon name="Share-alt" color="light"></ion-icon>
    </ion-fab-button>
</ion-fab>

home.ts

async sharePicker() {
var doc = new jsPDF();
var col = ["Id", "Brand name"];
var rows = [];
this.brand.forEach(element => {
  var temp = [
    element.id,
    element.name,
  ];
  console.log("temp", temp)
  rows.push(temp);

});
doc.autoTable(col, rows);
doc.save("BrandList.pdf");

this.platform.ready()
  .then(() => {
    this.socialSharing.share(null, null, doc.save("BrandList.pdf"), null)
      .then((data) => {
        console.log('Shared via SharePicker');
      }).catch((err) => {
        console.log('Was not shared via SharePicker');
      });
   });
  }

Items List get Directly to the Database and Added to the col Parameter,

I want when i click FAB Button, then PDF Generate Automatically, and open the share Option and Send PDF on Social Media, like, whatsapp, fb, etc

this code generate PDF in Browser but not on Device.

Answer 1

jsPDF won't download file on phones/ tablets / ipads using "pdf.save()".

Check this

The options to send directly via social share is use email with file Param or you can also upload via Firebase and share only the url

Example using Firebase:

uploadPDF(selected) {  
    return firebase.storage().ref(this.pathFinal).child('/path/').putString(selected, 'data_url')
  }

Then:

upload(){        
    let loading = this.uiUtils.showLoading("uploading...")
    loading.present()

    this.storage.uploadPDF('pathtopdf')

      .then(snapshot => {

        snapshot.ref.getDownloadURL().then(url => {
          loading.dismiss()
            console.log('Share this url: ' + url)
            this.uiUtils.showAlertSuccess('Success')
          })

        }).catch(err => {
          loading.dismiss()
          this.idUrl = ""
          this.uiUtils.showAlert("Atenção", err).present()

        })
      })
      .catch( error => {
        loading.dismiss()
        this.uiUtils.showAlert("Atenção", error).present()

      }).catch(errorSend => {
        loading.dismiss()
        this.uiUtils.showAlert("Atenção", errorSend).present()
      })      
  }