ionic 在线浏览pdf

npm install simple-pdf-viewer --save

app.module
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { SimplePdfViewerModule } from 'simple-pdf-viewer';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    SimplePdfViewerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

page.module
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { PdfViewerPage } from './pdf-viewer';
import { SimplePdfViewerModule } from 'simple-pdf-viewer';

@NgModule({
  declarations: [
    PdfViewerPage,
  ],
  imports: [
    IonicPageModule.forChild(PdfViewerPage),
    SimplePdfViewerModule
  ],
})
export class PdfViewerPageModule {}

template
<ion-content padding>
  <section id="viewer">
    <!-- Simple PDF Viewer: open the test.pdf at the second page -->
    <simple-pdf-viewer #pdfViewer [src]="'../../assets/pdf/1.pdf#page=1'"></simple-pdf-viewer>
</section>

<!-- Example actions -->
<button (click)="pdfViewer.zoomIn()">Zoom In</button>
<button (click)="pdfViewer.nextPage()">Next Page</button>
<button (click)="pdfViewer.turnLeft()">Turn the document left</button>
<button (click)="pdfViewer.search('PDF')">Search the world 'PDF'</button>
<button (click)="pdfViewer.zoomFullPage()">full</button>

<!-- Information -->
<p>Number of pages: {{ pdfViewer.getNumberOfPages() }}</p>
<p>Actual page: {{ pdfViewer.getCurrentPage() }}</p>
<p>Zoom: {{ pdfViewer.getZoomPercent() }} %</p>
<p>Meta: {{pdfViewer.getDocumentInformation()}}
    <!-- <ul *ngFor="let info of pdfViewer.getDocumentInformation()">
        <li>{{info.key}}: {{info.value}}</li>
    </ul> -->
</p>
</ion-content>

ts
 @ViewChild(SimplePdfViewerComponent) private pdfViewer: SimplePdfViewerComponent;

this.pdfViewer.zoomFullPage(); //设置初始自适应屏幕宽度
通过设置手势拖放比例，手机旋转调整体验也不错