How to open pdf in web browser using ionic 4?

Question

I'm creating ionic 4 angular app ,and using file ,file opener ,file transfer , document viewer to open pdf in mobile devices . Now i want to open pdf in web browser ? Below my code for open pdf ...

 // My method for open pdf

  openLocalPdf() {
  let filePath = this.file.applicationDirectory + 'www/assets';

  if (this.platform.is('android')) {
  let fakeName = Date.now();
  this.file.copyFile(filePath, '5-tools.pdf', this.file.dataDirectory, `${fakeName}.pdf`).then(result => {
    this.fileOpener.open(result.nativeURL, 'application/pdf')
      .then(() => console.log('File is opened'))
      .catch(e => console.log('Error opening file', e));
  })
  } else {
  // Use Document viewer for iOS for a better UI
  const options: DocumentViewerOptions = {
    title: 'My PDF'
  }
  this.document.viewDocument(`${filePath}/5-tools.pdf`, 
 'application/pdf', options);
  }
 }

rtpHarry · Accepted Answer · 2019-08-04 04:13:07Z

1

One option is to use IAB / InAppBrowser for this.

You can use this line of code:

this.iab.create("https://www.example.com/some.pdf", '_system', 'location=yes');

It's designed to let you open the system browser and other things on devices, but on desktop it will just open the link in a new tab on a browser.

I assume you can look up the platform code to detect desktop platform that would need wrapping around this.

answered Aug 4, 2019 at 4:13

rtpHarry

13.2k4 gold badges45 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jackcoral · Accepted Answer · 2020-12-11 16:29:44Z

0

I found solution and this work for me:

public openPDF() {
  this.iab.create('assets/docs/doc.pdf', '_system', 'location=yes');
}

This code simple open your local pdf file on default device browser. I used https://ionicframework.com/docs/native/in-app-browser capacitor plugin.

answered Dec 11, 2020 at 16:29

jackcoral

211 bronze badge

Collectives™ on Stack Overflow

How to open pdf in web browser using ionic 4?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related