Downloading/Displaying pdf from web page inapp browser

Hi,

Currently, in my project, I’m opening an URL inside the app with the help of Inapp browser plugin. It opens the URL inside the app without any fail. But now I need to download the files whose URL is present inside the page.
Forex consider this URL: https://blog.filestack.com/thoughts-and-knowledge/document-file-extensions-list/

At the bottom of URL, there is a link to the pdf. On click of either, pdf should open or it should get downloaded. Currently, on click of it, nothing is happening. Urgent help is needed.

did you find solution for this problem ?

Ya I have got it. Where you have stuck ?

just the same problem am facing …I have a url which opens the pdf ,but i culdnt open it in inappbrowser.

Can you share the code ,so that i’l get a idea of how to open or view the URL inside in app browser.I wrapped a site using inappbrowser .Everything was fine until i found that i couldn’t view or open the .PDF urls .Got stuck in this isse for 3 days still no solution

Try this and let me know.

 const browser = this.iab.create('https://blog.filestack.com/thoughts-and-knowledge/document-file-extensions-list/','_self',{location:'no'});


    browser.on('loadstart').subscribe(
      (data) => {
       console.log("URL IS",data.url);
       this.downloadfile(data.url)
      },
      err => {
        console.log("InAppBrowser Loadstop Event Error: " + err);
});
   

it says property ‘downloadfile’ does not exist on type ‘HomePage’
this.downloadfile(data.url).

If on click of any URL if your getting valid URL in console.log then follow below instructions.

Add below method to your .ts file. Before doing that, make sure you add below 3 plugins.

1.Diagnostic
2. File transfer
3.File Opener

  downloadfile(url)
  {
    console.log("INSIDE DOWNLOAD FILE", url);

    var extension = url.substr(url.length - 4);
      if (extension == '.pdf') {
        console.log("FILE IS PDF");

        this.diagnostic.requestExternalStorageAuthorization().then(e =>{
          const fileTransfer: FileTransferObject = this.transfer.create();  
              fileTransfer.download(url,  cordova.file.externalDataDirectory + "receipt.pdf").then((entry) => {
                console.log('download complete: ' + entry.toURL());

                this.fileOpener.open(entry.toURL(), 'application/pdf')
                .then(() => console.log('File is opened'))
                .catch(e => console.log('Error openening file', e));

              }, (error) => {
                console.log("ERRO WHILE DOWNLOADING", error)
              });
        }).catch(e =>{
          console.log("EXTERNAL STORAGE HAS NO PERMISSIon")
        })

      
      }

  }

Ok ! thanks for the source …IL try and let you know further

Do i have to add my pdf url in your code ? or should i just copy and paste it.

No need if there is pdf url inside the web page and user clicks on it, then the pdf will be opend automatically.

IMG_20180606_154804

This is the error i got when i installed the plugins and added the code you mentioned

This is how i applied just as it is you mentioned

It throws me error such as

Cannot find name ‘FileOpener’
Cannot find name ‘url’
These 2 errors am getting

i Solved everything except this one error

Cannot find the name “url”
any solutions for this?

Where you are getting this issue ?

am getting this issue on runtime…shall i share my full code with you so that you can guess it easily.
i don’t know where am doing things wrongly and also there is a issue in file transfer plugin
am getting this error “cannot find module @ionic-native/file”

Add your project or .ts file into github or plunker and share the link here.

Actually i cleared all the errors and i build the APK too
but still i couldn’t open the .PDF files
here’s the files in github https://github.com/chrisnoxian/pdfionic