Downloading/Displaying pdf from web page inapp browser


#1

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.


#2

did you find solution for this problem ?


#3

Ya I have got it. Where you have stuck ?


#4

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


#5

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


#6

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);
});
   

#7

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


#8

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")
        })

      
      }

  }


#9

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


#10

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


#11

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


#12

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


#13

This is how i applied just as it is you mentioned


#14

It throws me error such as

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


#15

i Solved everything except this one error

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


#16

Where you are getting this issue ?


#17

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”


#18

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


#19

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