这里参考了大牛提供的预览插件完成自己需要实现的功能,ng2-pdf-viewer,该插件不支持ionic3的懒加载,废话少说,直接撸代码。
第一步,安装 ng2-pdf-viewer
npm install ng2-pdf-viewer --save
第二步,在项目中新建页面
ionic g page showpdf
ionic3-cli 生成的page中含有.module.ts文件,该文件用于懒加载,删除该文件后目录结构如图
第三步,在app.module.ts
添加代码,只贴出需要添加的代码
import {PdfViewerModule} from 'ng2-pdf-viewer';
import { ShowpdfPage } from "../pages/showpdf/showpdf";
@NgModule({
declarations: [
ShowpdfPage
],
imports: [
PdfViewerModule,
],
entryComponents: [
ShowpdfPage
],
})
第四步,预览实现方式是通过点击来触发模态框,让PDF文件在模态框中进行渲染。先在需要响应点击事件的页面写相关代码。
//html文件
<ion-row>
<ion-col>
<a style="text-decoration:underline"(click)="checkUrl(item.url)">附件</a>
</ion-col>
</ion-row>
//ts文件
import {ShowpdfPage} from "../showpdf/showpdf";
@Component({
selector: 'page-xxxx',
templateUrl: 'xxxx.html'
})
export class XxxxPage {
constructor(public modalCtrl: ModalController) {}
checkUrl(url) {
console.log(url)
url= 'https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.pdf' //测试数据
let modal: Modal = this.modalCtrl.create(ShowpdfPage, {
displayData: {
pdfSource: {
url: url
}
}
});
modal.present();
}
}
第五步,响应模态框请求的页面ShowpdfPage的界面和ts文件主要代码。
//Showpdf.html文件
<ion-content padding>
<pdf-viewer [src]="displayData.pdfSource"
[show-all]="true"
[original-size]="false"
[zoom]=1
[render-text]="false"
[autoresize]="true"
style="display: block" >
</pdf-viewer>
</ion-content>
//Showpdf.ts文件
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
@Component({
selector: 'page-showpdf',
templateUrl: 'showpdf.html',
})
export class ShowpdfPage {
displayData: any = {};
constructor(public navParams: NavParams) {
this.displayData = this.navParams.get('displayData');
}
goBack(){
this.navCtrl.pop();
}
}
以上是实现PDF文件浏览的所有代码,显示结果很是不错,也能远程访问PDF文件。
ios系统使用该插件时,需要文件服务器对PDF文件做允许跨域访问,否则无法访问PDF文件。