您好我想在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'?
答案 0 :(得分:3)
尝试将其导入为
从中导入{DocumentViewer,DocumentViewerOptions} '@离子天然/文档查看器';