@anespa (Anes P A) posted a new topic, subject "How to open Base 64 PDF data in Inapp Browser?". It read:

   Friends,
    
    I am trying to download my base 64 pdf data from web service using inapp browser. I have no idea how it can done … I got the base 64 data … How it can pass to inappbrowser and successfully download in device …
    
    Please advise
    
    Thanks  
    Anes

@anespa (Anes P A) replied

    Dear Friends,
    
    I tried a code to open base64 pdf data in inappbrowser as follows:
    [code] 
        import { Component } from '@angular/core';
        import { IonicPage, NavController, NavParams, Platform } from 'ionic-angular';
        import { FormBuilder, FormGroup, Validators, AbstractControl } from '@angular/forms';
        import { CertificateProvider } from '../../providers/certificate/certificate';
        import { HttpClient } from '@angular/common/http';
        import { File } from '@ionic-native/file';
        import { FileOpener } from '@ionic-native/file-opener';
        import {GlobalProvider} from "../../providers/global/global";
        import { InAppBrowser, InAppBrowserOptions } from "@ionic-native/in-app-browser";
        /**
         * Generated class for the OwnershipCertificateProcessingPage page.
         *
         * See https://ionicframework.com/docs/components/#navigation for more info on
         * Ionic pages and navigation.
         */
        
        @Component({
          selector: 'page-ownership-certificate-processing',
          templateUrl: 'ownership-certificate-processing.html',
        })
        export class OwnershipCertificateProcessingPage {
          param1 : any;
          param2 : any;
          param3 : any;
          param4 : any;
          param5 : any;
          param6 : any;
          param7 : number;
          param8 : any;
          param9 : number;
          param10 : string;
          param11 : number;
          public today : number 	= Date.now();
          formgroup:FormGroup;
          purpose:AbstractControl;
          purposes:any;
          PDF:string;
          data:any = {}; 
          connectivityFlag: boolean = false;
        
          constructor(public navCtrl: NavController, 
                      public navParams: NavParams,
                      public http: HttpClient,
                      public formbuilder: FormBuilder,
                      public certificateProvider: CertificateProvider,
                      private file: File, 
                      private fileOpener: FileOpener,
                      public global1:GlobalProvider,
                      public platform: Platform ) {
           this.param1 = navParams.get('param1');
           this.param2 = navParams.get('param2');
           this.param3 = navParams.get('param3');
           this.param4 = navParams.get('param4');
           this.param5 = navParams.get('param5');
           this.param6 = navParams.get('param6');
           this.param7 = navParams.get('param7'); //LBID
           this.param8 = navParams.get('param8');//zoneID
           this.param9 = navParams.get('param9');//ward year
           this.param10 = navParams.get('param10'); // lbname
           this.param11 = navParams.get('param11'); //bid
           this.formgroup = formbuilder.group({
            purpose:['',Validators.required]
           });
           this.purpose = this.formgroup.controls['purpose'];
           this.data.purpose = '';
          }
          getPurpose() 
          {
            this.certificateProvider.getPurpose()
            .then(data => {
              this.purposes = data;  
            })
          }
          
          getOwnershipCertificate(lb, bid, reason) {
            if(this.global1.getnetwork())
            {  
                this.connectivityFlag = true;
                this.certificateProvider.getOwnershipCertificate(lb, bid, reason)
                .then(data => {
                    var downloadPDF: any = data[0].ownershippdf;
                    var base64pdf = downloadPDF;
                    var contentType = 'application/pdf';
                    // only work for Android
                    var pathFile = cordova.file.externalDataDirectory;
                    var fileName = "Ownership.pdf";
                    alert("base64pdf: "+base64pdf);
                    const blob: Blob = this.b64toBlob(base64pdf,contentType,512);
                    alert("blob: "+blob);
                    //experiment using inappbrowser
                    document.addEventListener("deviceready", onDeviceReady, false);
        function onDeviceReady() {
            window.open = cordova.InAppBrowser.open;
        }
        
        var pageContentUrl = 'data:application/pdf;base64,'+base64pdf;
        this.platform.ready().then(() => {
        var browserRef = window.open(pageContentUrl,"_blank","hidden=no,location=no,clearsessioncache=yes,clearcache=yes,hardwareback=no");
          
               browserRef.addEventListener( "loadstop", function() {
            });
         
              });
        
        
                    //experiment ends
        
            }).catch(err => {
                console.error('ownership get error',err);
        
            }); 
        
           } else {
            alert("You are offline, please be online to get ownership certificate");
           }
         }
        
        
        
          
         b64toBlob(b64Data, contentType, sliceSize) 
          {
            contentType = contentType || '';
            sliceSize = sliceSize || 512;
        
            var byteCharacters = atob(b64Data);
            var byteArrays = [];
        
            for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
                var slice = byteCharacters.slice(offset, offset + sliceSize);
        
                var byteNumbers = new Array(slice.length);
                for (var i = 0; i < slice.length; i++) {
                    byteNumbers[i] = slice.charCodeAt(i);
                }
        
                var byteArray = new Uint8Array(byteNumbers);
        
                byteArrays.push(byteArray);
            }
        
            var blob = new Blob(byteArrays, {type: contentType});
            return blob;
          } 
        
        
          ionViewDidEnter() {
            if(this.global1.getnetwork())
            {   
                this.connectivityFlag = true;
                this.getPurpose();
        
            } else {
                alert("You are offline, please be online to get ownership certificate");
            }
          }
          ionViewDidLoad() {
            console.log('ionViewDidLoad OwnershipCertificateProcessingPage');
          }
        
        }
        
        
    [/code]
    
    I have no error in console . But get a white screen as output . Please advise
    
    Thanks  
    Anes

To which @leo3cu (leo3cu) replied

    I use FileOpener to open file PDF
    [code] 
        import { FileTransfer, FileTransferObject } from '@ionic-native/file-transfer';
        import { FileOpener } from '@ionic-native/file-opener';
        
         if (typeOS === 'ios') {
              this.storageDirectory = cordova.file.documentsDirectory;
            }
            else if (typeOS === 'android') {
              this.storageDirectory = cordova.file.dataDirectory;
            }
        
            const fileTransfer: FileTransferObject = this.transfer.create();
        
            fileTransfer.download(urlDownload, this.storageDirectory + text).then((entry) => {
              this.loading.dismiss();
              this.fileOpener.open(entry.toURL(), 'application/pdf')
                .then(() => { })
                .catch((e) => {
                  this.loading.dismiss();
                });
            }, (error) => {
              this.loading.dismiss();
            });
        
    [/code]

@anespa (Anes P A) replied

    Dear @leo3cu ,  
    You misunderstand my requirement. I have no file stored any where to open using file opener.  
    I have only a web service base 64 PDF data. You please advise how to save that data as a PDF in my device . If that successful open it with a file opener as you mention is not a big deal…
    
    Please advise how to store that base64 data as PDF …
    
    Thanks  
    Anes

@anespa (Anes P A) replied

    Dear @leo3cu  
    if could not save it I need to open the type of URL
    [code] 
        data:application/pdf;base64,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686t5r5I8UmpS5lPDUo9lLqYFpXWno5Lj08/wZPhpfL6MlQzVmcMZRpmFmaOrrJftWfVLN+f35QFZS3P6hZQRT9TA0I94RbhWLZTdk32m5zInOOrpVfzVg/kGuRuz51c47Xm67Wotay1vXnqeZvyxta5rqtfD61PWN+7QXNDwYaJjd4bD28ibErd9EO+WX5Z/qvNUZt7ClQKNhaMb/He0looUcgvvL3VYWvdNtQ27rbB7Zbbq7Z/LGIXXSk2K64ofl/CKrnylflXlV8t7kjcMVhqU7p/J2Ynb+fILuddh8uky9aUje8O3N1ZTi8vKn+1Z+WeyxVWFXV7CXuFe0crAyq7q7Sqdla9r06uHq5xq2mvVa7dXju/j73vxn6X/W11KnXFde8OcA/cqfeu72zQaag4iDmYffBJY2Rj/9eMr5ubFJuKmz4c4h0aPRx6uK/Ztrm5RbmltBVuFbZOH4k7cv0bj2+624zb6ttp7cVHwVHh0affxn87csz/WO9xxvG277S/q+2gdBR1Qp25nbNdyV2j3THdQyf8TvT2OPR0fG/y/aGT6idrTsmeKj1NOF1wevHMmjNzZzPPzpxLOjfeu7L3/vno87f6QvoGL/hfuHTR6+L5ftf+M5ccL528bH/5xBXGla6rNlc7B6wHOn6w/qFj0Gaw85rtte7rdtd7hpYMnb7hfOPcTY+bF2/53ro6vHR4aCRi5M7tuNujd9h3pu6m3X1xL/vewv2ND9APih5KPax4pPyo4Uf9H9tHbUZPjXmMDTwOe3x/nDX+7Kesn95PFDwhP6mYVJtsnrKYOjntNX396bKnE88yny3MFP4s/XPtc73n3/3i8svAbPTsxAv+i8VfS14qvDz0yupV71zw3KPX6a8X5oveKLw5/Jbxtv9d1LvJhZz32PeVH/Q/9Hz0//hgMX1x8V/3hPP7y2IJQQplbmRzdHJlYW0KZW5kb2JqCjMgMCBvYmoKPDwKPj4gZW5kb2JqCjkgMCBvYmoKPDwKL0Jhc2VGb250IC9IZWx2ZXRpY2EgCi9FbmNvZGluZyAvV2luQW5zaUVuY29kaW5nIAovU3VidHlwZSAvVHlwZTEgCi9UeXBlIC9Gb250IAovTmFtZSAvSGVsdiAKPj4gZW5kb2JqCjEwIDAgb2JqCjw8Ci9DcmVhdGlvbkRhdGUgKEQ6MjAwODA2MTExNjU2MDMpIAovTW9kRGF0ZSAoRDoyMDA4MDYxMTE2NTYwMykgCi9Qcm9kdWNlciAoSWJleCBQREYgQ3JlYXRvciA0LjMuNi40LzUwMjUgWy5ORVQgMi4wXSkgCj4+IGVuZG9iagp4cmVmCjAgMTEKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwNjE2IDAwMDAwIG4gCjAwMDAwMDA1NTYgMDAwMDAgbiAKMDAwMDAwMzQyNCAwMDAwMCBuIAowMDAwMDAwNzA2IDAwMDAwIG4gCjAwMDAwMDA3NDEgMDAwMDAgbiAKMDAwMDAwMDIxNSAwMDAwMCBuIAowMDAwMDAwNDgwIDAwMDAwIG4gCjAwMDAwMDAwMjAgMDAwMDAgbiAKMDAwMDAwMzQ0NSAwMDAwMCBuIAowMDAwMDAzNTU5IDAwMDAwIG4gCnRyYWlsZXIKPDwKL1NpemUgMTEgCi9JbmZvIDEwIDAgUiAgCi9Sb290IDEgMCBSIAo+PgpzdGFydHhyZWYKMzY5OAolJUVPRgo=
        
    [/code]
    
    in our mobile system browser is enough …
    
    Please advise

So @marlos (Marlos) replied

    If you want to use InAppBrowser, try first to convert your base64 data into a Blob like this:
    
    > //var pageContentUrl = ‘data:application/pdf;base64,'+base64pdf;
    > 
    > var contentType = “application/pdf”;  
    >  var dataBlob = this.b64toBlob(base64pdf, contentType);  
    >  this.platform.ready().then(() => {  
    >  var browserRef =  
    >  window.open(URL.createObjectURL(dataBlob),"_blank",“hidden=no,location=no,clearsessioncache=yes,clearcache=yes,hardwareback=no”);
    [code] 
    >        browserRef.addEventListener( "loadstop", function() {
    >     });
    >     
    [/code]
    > 
    > });
    > 
    > //Convert a base64 string in a Blob according to the data and contentType.  
    >  b64toBlob(b64Data, contentType) {  
    >  contentType = contentType || ‘';  
    >  var sliceSize = 512;
    [code] 
    >       //decode base64 data
    >       var byteCharacters = atob(b64Data);
    >       var byteArrays = [];
    >     
    >       for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    >       		var slice = byteCharacters.slice(offset, offset + sliceSize);
    >     
    >       		var byteNumbers = new Array(slice.length);
    >       		for (var i = 0; i < slice.length; i++) {
    >       				byteNumbers[i] = slice.charCodeAt(i);
    >       		}
    >     
    >       		var byteArray = new Uint8Array(byteNumbers);
    >     
    >       		byteArrays.push(byteArray);
    >       }
    >     
    >       var blob = new Blob(byteArrays, {type: contentType});
    >       return blob;
    >     
    [/code]
    > 
    > }

After which, @mhartington (Mike Hartington) added

    


{'source': 'discourse', 'url': 'https://forum.ionicframework.com/t/how-to-open-base-64-pdf-data-in-inapp-browser/124277', 'title': 'How to open Base 64 PDF data in Inapp Browser?', 'views': 6306, 'has_accepted_answer': False, 'word_count': 983, 'like_count': 0, 'reply_count': 4, 'participant_count': 3, 'posts': 7, 'tags': '', 'author': '@anespa (Anes P A)', 'participants': '@anespa (Anes P A), @leo3cu (leo3cu), @marlos (Marlos), @mhartington (Mike Hartington)', 'image_url': [None], 'created_at': '2018-03-12T12:02:52.291Z', 'last_posted_at': '2021-07-19T21:45:55.311Z'}