Could not download PDF from base 64 data from web service . Why?


#1

Friends,
I got a web service output as base 64 encoded data for PDF. I response i get the value , but no pdf output…

My Web service provider method is

getOwnershipCertificate(lb,bid,reason)
  {
    var obj = {wspassword: 'Ikm#itmi$$i0n', wsname: 'getOwnershipCertPDF', lb: lb, bid: bid, reason: reason  };
    var myData = JSON.stringify(obj);
    if(this.data)
    {
      return Promise.resolve(this.data);
    } else {
      return new Promise 
      (
        (resolve,reject) => 
                    {
                      this.http.post('http://ccc.jhj.gov.in/mobservice/index.php/sanchaya/',myData,{ headers: new HttpHeaders()
                      , responseType: 'json'})
                      //.map(res => res)
                      .subscribe
                                 (res => {
                                    resolve(res);
                                   },
                                   err => {console.log("oops some error on taking ownership certificate PDF base 64 encoded string");reject(err);}
                                 );
                    }
      );
    }
  }

My Controller functions are

getOwnershipCertificate(lb, bid, reason) {
    this.certificateProvider.getOwnershipCertificate(lb, bid, reason)
    .then(data => {
        let downloadPDF: any = data[0].ownershippdf;
        //let base64pdf = 'data:application/pdf;base64,' + downloadPDF;
        let base64pdf = downloadPDF;
        console.log("log is"+base64pdf);
        let blobPdf = this.b64toBlob(base64pdf, 'application/pdf',512);
 
        this.file.writeFile(this.file.externalRootDirectory, 'Ownership.pdf', blobPdf, { replace: true })
     .then(res => {
           console.log('wres', res);
         this.fileOpener.open(res.toInternalURL(), 'application/pdf').then((ores) => {
               console.log('ores', ores)
         }).catch(err => {
             console.log('open error');
         });
     }).catch(err => {
         console.log('save error');
     });
    }).catch(err => {
        console.error('ownership get error',err);
    });
 }

and

b64toBlob(b64Data, contentType, sliceSize) {
    contentType = contentType || '';
    sliceSize = sliceSize || 512;
 
    let byteCharacters = atob(b64Data);
    let byteArrays = [];
 
    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        let slice = byteCharacters.slice(offset, offset + sliceSize);
 
        let byteNumbers = new Array(slice.length);
 
        for (let i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }
 
        let byteArray = new Uint8Array(byteNumbers);
 
        byteArrays.push(byteArray);
    }
 
    var blob = new Blob(byteArrays, {type: contentType});
    return blob;
 }

My sample base 64 output is : Sample pdf base 64 value

I did not any error and got the base 64 encoded data as output. Please advise how to download pdf and open it default…

Thanks

Anes


Ionic - Base64 PDF
File writeFile don't save Blob on some Android
#2

@anespa your code looks very good, for a first step. Now you need to handle errors like with return(). :wink:


#3

Dear Francois
Do you please advise what modification I need to do in current code to download pdf ( open pdf) ? Please suggest code edit help with some working code snippet on current code

Thanks

Anes


#4

@anespa hello, with a super quick look, i’d say this is what makes your code fails:

let blobPdf = this.b64toBlob(base64pdf, ‘application/pdf’,512);

… you need to have a better function for base64toPDF, it looks buggy.

Regards,


#5

Dear Francois,

I feel you are right. Do you please suggest a good function for making blobPDF ?

any body please reply

Anes


#6

@anespa ur code looks perfect. but the problem here is converstion of base64 to blob.
let blobPdf = this.b64toBlob(base64pdf, ‘application/pdf’,512);

Use FetchAPI to convert the base64 to blob response. I hope this will solve ur problem.

let base64pdf = downloadPDF
 fetch('data:application/pdf;base64,' + base64pdf,{
         method: "GET"          
    }).then(res => res.blob()).then(blobPdf => {
      this.file.writeFile(this.file.externalRootDirectory, 'Ownership.pdf', blobPdf, { replace: true })
     .then(res => {
           console.log('wres', res);
         this.fileOpener.open(res.toInternalURL(), 'application/pdf').then((ores) => {
               console.log('ores', ores)
         }).catch(err => {
             console.log('open error');
         });

     }).catch(err => {
                 console.log(‘error’)
     })

#7

Hi Sathasivam,

I changed my code some bit as follows

getOwnershipCertificate(lb, bid, reason) {
    this.certificateProvider.getOwnershipCertificate(lb, bid, reason)
    .then(data => {
        let downloadPDF: any = data[0].ownershippdf;
        let base64pdf = downloadPDF;
        var binary = atob(base64pdf.replace(/\s/g, ''));
        var len = binary.length;
        var buffer = new ArrayBuffer(len);
        var view = new Uint8Array(buffer);
        for (var i = 0; i < len; i++) {
            view[i] = binary.charCodeAt(i);
        }
           
        var blobPdf = new Blob( [view], { type: "application/pdf" });
        this.file.writeFile(this.file.externalRootDirectory, 'OwnershipCertificate.pdf', blobPdf, { replace: true })
     .then(res => {
           console.log('wres', res);
         this.fileOpener.open(res.toInternalURL(), 'application/pdf').then((ores) => {
               console.log('ores', ores)
         }).catch(err => {
             console.log('open error');
         });
     }).catch(err => {
         console.log('save error');
     });
    }).catch(err => {
        console.error('ownership get error',err);
    });
 }

It work fine in Kitkat(4.4) and lolipop(5.1) . But not in Nougat and Marshmallow…

Please advise …

N.B https://app.box.com/s/r97ue9woi4ehg7d99ofmkswo2ye8tbep

In this app , there is an option to Ownership Certificate

Give Wardno and Door no as 1

in second form select Purpose as Bank

Tell is PDF downloaded … Waiting reply

Thanks

Anes


#8

in Nougat and Marshmallow are u getting any error


#9

No error occur… Any permission need to be added with marshmellow or Nougat… please advise

Thanks
Anes


#10

Dear @Sathasivamr,Francois ,

But when i remove blob option I got download screen but get error and closed automatically.

The app is run on 5.1 , but not in 5.1.1

Thanks

Anes


How to generate a unique random value for a mobile transaction?
#11

@anespa add following lines to config.xml

<preference name="AndroidPersistentFileLocation" value="Compatibility" />
<preference name="AndroidExtraFilesystems" value="sdcard,cache" />

#12

It’s already added , no change …


#13

instead this one

can u try the following code may be FetchAPI will help u to solve the problem.


#14

Dear Sathasivam,
The exact base 64 data shown in console and Network tab show contents( in chromium) as


but no actual pdf Download occur.

Please advise


#15

Have you found any working solution for this particular feature?