ionic3 中查看pdf

npm install ng2-pdf-viewer@3.0.8 --save

需要使用 3.0.8版本的
在跟组件中注册模块

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';import { PdfViewerModule } from 'ng2-pdf-viewer';@NgModule({imports: [BrowserModule, PdfViewerModule],declarations: [AppComponent],bootstrap: [AppComponent]
})class AppModule {}platformBrowserDynamic().bootstrapModule(AppModule);

在页面中使用

<ion-header><ion-navbar><ion-title>在页面中使用</ion-title></ion-navbar>
</ion-header><ion-content padding><button (click)="next()">下一页</button><pdf-viewer [src]="'https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf'" //PDF所在地址[render-text]="true"[original-size]="false"style="width: 2000px; height: 1000px"  PDF大小[render-text]="true"  [show-all]="false"   // 不全部展示所有PDF[(page)] = "page"   // 展示第几页[stick-to-page]="true"  (pages-initialized)="pageInitialized($event)"(after-load-complete)="callBackFn($event)"  //获取PDF信息 如有多少页 等PDF信息
></pdf-viewer>
</ion-content>

逻辑层

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({selector: 'page-about',templateUrl: 'about.html'
})
export class AboutPage {
public page = 1  // 一上来只让它展示第一页constructor(public navCtrl: NavController) {}next(){this.page++     // 每次点击下一页按钮就到下一页 console.log(this.page)}callBackFn ( pdf ) { console.log(pdf)       // PDF 信息// 用“pdf”做任何事情}
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！