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

Question

您好，我想在 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'?

Answer 1

尝试将其导入为

导入 { DocumentViewer, DocumentViewerOptions } 从 '@ionic-native/document-viewer';