Ionic 2在离子页面/模态中显示PDF

时间:2017-07-28 13:49:39

标签: angularjs typescript pdf ionic-framework ionic2

您好我想在Ionic页面中显示PDF以在Android和iOS手机上显示。不确定最好的方法,我正在尝试http://ionicframework.com/docs/native/document-viewer/没有运气,任何人都可以提供帮助?感谢

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

我将import { DocumentViewer } from '@ionic-native/document-viewer';添加到app.module.ts以及提供商。

这些是我的错误:

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'?

1 个答案:

答案 0 :(得分:3)

尝试将其导入为

  

从中导入{DocumentViewer,DocumentViewerOptions}   '@离子天然/文档查看器';