IONIC 3 and jsPDF , using FILE Transfer to download pdf not working

Question

i want to use jsPDF library with IONIC3 to download PDF , i have created a simple document and when i try to download it with the default function from jsPDF doc.Save() it work in my browser , but in a real device won't work. So i decided to use FileTransfer Plugins from IONIC native , i have firstly created a blob File from jsPDF output , then i tried to use the writeFile() function from IONIC FILE plugin to create a new file from the blob , then i tried to download that file using Download() function from FileTransfer , Here is my code : `

createPdf(){
    const fileTransfer: FileTransferObject = this.transfer.create();
    //Initialize jsPdf
    let doc = new jsPDF();
    doc.setFontStyle('Bold');
    doc.setFontSize(14);
    doc.text('Testing PDFs', 20, 20);
    // doc.save("example.pdf") This is the default way to download pdf In jsPDF , but it's not working in ionic
    // So Here i create new File from the blob
    let blob = doc.output('blob', {type: 'application/pdf'});
    this.file.writeFile(this.file.dataDirectory,"example.pdf",blob)
    .then((value)=>{
              console.log("File created successfly" + value);
              // if The file successfuly created , i want to download it
              fileTransfer.download( this.file.dataDirectory+"example.pdf" ,this.file.dataDirectory+"example.pdf")
                .then((entry)=>{
                  console.log("Download Success : " , entry);
                })
                .catch((error)=>{
                      console.log("Error when downloading file : " ,error);
                })
    })
    .catch((error)=>{
      console.log("Error creating File");
    });
)

`

if i look to my output console everything work ok , but nothing Happen !!

[19:50:26] console.log: File created successfly{"isFile":true,"isDirectory":false,"name":"example.pdf","fullPath":"/example.pdf","filesystem":"","nativeURL":"file:///data/user/0/io.ionic.starter/files/exam

[19:50:26] console.log: Download Success : {"isFile":true,"isDirectory":false,"name":"example.pdf","fullPath":"/example.pdf","filesystem":"","nativeURL":"file:///data/user/0/io.ionic.starter/files/example.pdf"}

Answer 1

I will put it in case it works for someone, my solution is simple but functional.

 html2canvas(document.querySelector('#sect')).then(canvas => {
        let pdfOutput = doc.output();
        // using ArrayBuffer will allow you to put image inside PDF
        let buffer = new ArrayBuffer(pdfOutput.length);
        let array = new Uint8Array(buffer);
        for (var i = 0; i < pdfOutput.length; i++) {
          array[i] = pdfOutput.charCodeAt(i);
        }
        const directory = this.file.externalApplicationStorageDirectory;
        this.file.writeFile(directory, fileName, buffer)
          .then((success) => {
            console.log("File created Succesfully" + JSON.stringify(success));
            this.fileOpener.open(success.nativeURL, 'application/pdf').then((response) => {
              self.loadingService.hide();
            }).catch((err) => {
              console.log(err);
              self.loadingService.hide();
            });
          })
          .catch((error) => {
            console.log("Cannot Create File " + JSON.stringify(error));
            self.loadingService.hide();
          });
});

I am new solving in stackoverflow, understand if I still do not use it correctly

Answer 2

Please use below code :

  let pdfOutput = doc.output();
  // using ArrayBuffer will allow you to put image inside PDF
  let buffer = new ArrayBuffer(pdfOutput.length);
  let array = new Uint8Array(buffer);
  for (var i = 0; i < pdfOutput.length; i++) {
      array[i] = pdfOutput.charCodeAt(i);
  }

  const directory = this.file.externalApplicationStorageDirectory ;

  const fileName = "example.pdf";

  //Writing File to Device
  this.file.writeFile(directory,fileName,buffer)
  .then((success)=> console.log("File created Succesfully" + JSON.stringify(success)))
  .catch((error)=> console.log("Cannot Create File " +JSON.stringify(error)));