CODEWITHSUNDEEP
angularjstypescriptpdfionic-frameworkionic2
roshambo
roshambo

Reputation: 2784

Ionic 2 display a PDF in an ionic page/modal

Hi I want to display a PDF inside an Ionic page to display on Android and iOS phones. Not sure about the best way to do this, I am trying http://ionicframework.com/docs/native/document-viewer/ with no luck, anyone able to assist? Thanks

home.html

<button ion-button clear (click)="openModal('assets/pdf/filename.pdf')">
    <h2>Link</h2>
</button>
<button ion-button clear (click)="openModal('assets/pdf/filename2.pdf')">
    <h2>Link 2</h2>
</button>

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { PDFPage } from '../pdfviewer/pdfviewer';
import { ModalController } from 'ionic-angular';
import { DocumentViewer } from '@ionic-native/document-viewer';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {
    constructor(public navCtrl: NavController,public modalCtrl: ModalController,private document: DocumentViewer) { }
    const options: DocumentViewerOptions = {
      title: 'My PDF'
    }
    openModal(value) {
        let myModal = this.modalCtrl.create(PDFPage);
        myModal.present();
        this.document.viewDocument(value, 'application/pdf', options);
    }
}

pdfviewer.html

<ion-content padding>
    <ion-icon large name="close-circle" (click)="closeModal()" float-right style="z-index:9999;font-size:3.5em;padding:20px"></ion-icon>
</ion-content>

pdfviewer.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ViewController } from 'ionic-angular';
import { HomePage } from '../home/home';

@Component({
    selector: 'page-pdf',
    templateUrl: 'pdfviewer.html'
})
export class PDFPage {

    constructor(public navCtrl: NavController,public viewCtrl: ViewController) { }

    closeModal() {
        this.viewCtrl.dismiss();
    }
}

I added import { DocumentViewer } from '@ionic-native/document-viewer'; to app.module.ts as well as in the provider.

These are my errors:

Typescript Error A class member cannot have the 'const' keyword.

Typescript Error Cannot find name 'DocumentViewerOptions'.

Typescript Error Cannot find name 'options'. Did you mean the instance member 'this.options'?

Upvotes: 1

Views: 2020

Answers (1)

JunJun Hernandez
JunJun Hernandez

Reputation: 31

Try to import it as

import { DocumentViewer, DocumentViewerOptions } from '@ionic-native/document-viewer';

Upvotes: 3

Related Questions