admin管理员组

文章数量:1648949

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/appponent';

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”做任何事情
 }
}

本文标签： PDF

版权声明：本文标题：ionic3 中查看pdf 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/xitong/1729505655a1203597.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。