CODEWITHSUNDEEP
angulartypescriptionic-frameworkweb
liskior
liskior

Reputation: 67

How to open pdf in ionic

How should I use ionic FileOpener? Or another way to show PDF file? I have updated, but get error.

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
}) 
export class HomePage {
    page2 = Page2;
    ionViewDidLoad() {
    }
    pdfUrl : string;
    pins = PINS;
    str : string; 
    constructor(public navCtrl: NavController, private fileOpener: FileOpener) { 
    }
    onSelect(pin: Pin): void {
        this.fileOpener.open('assets/helloworld.pdf', 'application/pdf')
        .then(() => console.log('File is opened'))
        .catch(e => console.log('Error openening file', e));
    }
};

error

Upvotes: 1

Views: 8626

Answers (2)

gausmohammad shaikh
gausmohammad shaikh

Reputation: 193

Below error comes in browser only.

   Native: tried calling FileOpener.open, but Cordova is not available. Make 
   sure to include cordova.js or run in a device/simulator cordovaWarn @ 
   util.js:60 Error openening file cordova_not_available.

you can make ionic app apk and install in device then check it is work.

Upvotes: 2

Junior Gantin
Junior Gantin

Reputation: 2192

To open existing PDF file, you can use File Opener plugin.
First install the Cordova and Ionic Native plugins:

$ ionic cordova plugin add cordova-plugin-file-opener2
$ npm install --save @ionic-native/file-opener

Then add this plugin to your app's module (app.module.ts):

...

import { FileOpener } from '@ionic-native/file-opener';

...

@NgModule({
  ...

  providers: [
    ...
    FileOpener
    ...
  ]
  ...
})
export class AppModule { }

Now you can use your plugin:

import { FileOpener } from '@ionic-native/file-opener';
    
    constructor(private fileOpener: FileOpener) { }
    
    ...
    
    this.fileOpener.open('path/to/file.pdf', 'application/pdf')
      .then(() => console.log('File is opened'))
      .catch(e => console.log('Error openening file', e));

Hope I help!

Upvotes: 1

Related Questions