ionic3项目实现在线预览PDF文件

 

文章转自：https://blog.csdn.net/Raytheon107/article/details/82690687

亲测有效。

第一步：安装 ng2-pdf-viewer

npm install ng2-pdf-viewer --save

第二步：新建页面用于展示pdf

注释：新建页面时需要删除.module.ts文件（去除懒加载）

ionic g page showpdf

第三步：app.module.ts

import {PdfViewerModule} from 'ng2-pdf-viewer';  
import { ShowpdfPage } from "../pages/showpdf/showpdf";
 
@NgModule({
    declarations: [
        ShowpdfPage
    ],
    imports: [      
        PdfViewerModule,
    ],
    entryComponents: [
        ShowpdfPage
    ],
})
--------------------- 
作者：Raytheon107 
来源：CSDN 
原文：https://blog.csdn.net/Raytheon107/article/details/82690687 
版权声明：本文为博主原创文章，转载请附上博文链接！

第四步： home页面

//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();
    }
}
--------------------- 
作者：Raytheon107 
来源：CSDN 
原文：https://blog.csdn.net/Raytheon107/article/details/82690687 
版权声明：本文为博主原创文章，转载请附上博文链接！

第五步：showpdf页面 

//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();
  }
 
}
--------------------- 
作者：Raytheon107 
来源：CSDN 
原文：https://blog.csdn.net/Raytheon107/article/details/82690687 
版权声明：本文为博主原创文章，转载请附上博文链接！

到此完成。