ionic3 中查看pdf

原创于 2021-11-25 20:45:44 发布 · 471 阅读

CC 4.0 BY-SA版权

文章标签：

本文展示了如何在Angular应用中集成ng2-pdf-viewer库，以实现PDF文件的查看功能。通过引入模块，配置组件，并在页面中使用 PdfViewer 组件，可以实现PDF的展示、翻页等功能。同时，提供了逻辑层代码，演示了如何监听页面变化并获取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”做任何事情
 }
}