Work and study summarizes the use of --ng2-pdf-viewer

Recently, a pdf file to show demand, but also to show the contract signature, so check a lot of information, first with the pdf.js, but Android phones flash back, so they tried ng2-pdf-viewer this plugin , although the signature ios phone display does not come out, finally using pdf.js, but I still want to try this process recorded. Come on, get to the
first step, the installation ng2-pdf-viewer

npm install ng2-pdf-viewer --save

After installing Let's look at it in the directory structure of

the second step, a new page in the project

ionic g page pdf-viewerPage

The third step, in app.module.ts add the code, just posted the code to add

import {PdfViewerModule} from 'ng2-pdf-viewer';  
import {PdfViewerPage} from "../pages/pdf-viewer/pdf-viewer";

@NgModule({
    declarations: [
        PdfViewerPage
    ],
    imports: [      
        PdfViewerModule,
    ],
    entryComponents: [
        PdfViewerPage
    ],
})

The fourth step, html and ts in writing
html

<ion-content (ionScroll)="scrollEvent($event)">
    <pdf-viewer [src]="pdfUrl"
    [show-all]="true"
    [original-size]="false"
    [zoom]=1
    [render-text]="false"
    [autoresize]="true"
    style="display: block;"
    (after-load-complete)="afterLoad($event)"
    ></pdf-viewer>
</ion-content>

ts Code

  if (res.code == 2000) {
    this.url = res.data;
    this.pdfSrc = {
      url: url,
      // withCredentials: true
   };
  afterLoad(pdf) {
  //  获取pdf文件总页数
    this.totalPage = pdf.numPages;
  }
import { Component, NgZone,ElementRef } from "@angular/core";
import { NavController, ModalController, NavParams } from "ionic-angular";
import { DomSanitizer } from "@angular/platform-browser";
import { Keyboard } from "@ionic-native/keyboard";
import { detailService } from "./detial.service";

@Component({
  templateUrl: "detail.html",
  providers: [detailService]
})
export class contractDetail {
  url: any = "";
  pdfSrc: any;
  totalPage: any;
  buttonShow: boolean = true; 
  show: boolean = false;
  type: string = "";
  contractId: string = "";
  channel: string = "";

  constructor(
    public navCtrl: NavController,
    public modalCtrl: ModalController,
    public sanitizer: DomSanitizer,
    private keyboard: Keyboard,
    public navParams: NavParams,
    public detailService: detailService,
    public storage: Storage,
    public ngzone: NgZone,
    private funcs: Funcs,
    public elementRef: ElementRef,
  ) {
  //  这是重点
    (<any>window).PDFJS.workerSrc = 'assets/js/pdf.worker.min.js';
  }

  ngDoCheck() {
  }

  ngOnInit() {
    this.getDetail();
  }

  ionViewWillLoad() {
  }

  ionViewDidLeave() {
    window.stop();
  }
  getDetail() {
    this.detailService.getDetail(this.contractNo).then(res => {
      if (res.code == 2000) {
        this.url = res.data;
        this.pdfSrc = {
          url: this.url,
          // withCredentials: true
       };
    });
  }

  scrollEvent(event) {
    let hei1 = document.body.clientHeight;
    let hei2 = this.elementRef.nativeElement.querySelector('pdf-viewer').clientHeight; 
    this.ngzone.run(() => {
      this.show = false;
      let top = event.scrollTop; //当前滑动的距离
      if (height2 <= height1 + top) {
        this.buttonShow = false;
      }
    })
  }

  // 获取pdf加载完成之后的总页数，然后判断只有一页的时候不展示提示语
  afterLoad(pdf) {
    this.totalPage = pdf.numPages;
    if(this.totalPage <= 1){
      this.show = false;
      this.buttonShow = false;
    }
  }
}

Ok after all the possibilities for beginning step on the road of the pit, as follows:
Local 1. First of all I want to show the electronic signature of the contract, so to comment out the hidden signature pdf.worker.min.js in this pdf.worker .min.js and pdfjs pdf.worker.min.js in the same file, can be said to be the same. So comment signature section, additional details, please read my blog post: work and study are summarized -pdf.js pit mining and the use of
2.pdf.worker.js this document, I am wondering install this plugin when installed automatically pdfjs-dist plug-in, but he calls pdf.worker.js by CDN remote. Fortunately, plug-in documentation related to the prompt, access to source code, it was found is really the case. (Borrowed)

so I added this line of code (focus) on the current page code

   //  这是重点
   (<any>window).PDFJS.workerSrc = 'assets/js/pdf.worker.min.js';

This is equivalent to using local pdf.worker.min.js, rather than cdn outreach.
Npm can look at the description of the ng2-pdf-viewer in, npm link address is https://www.npmjs.com/package/ng2-pdf-viewer

Set custom path to the worker
By default the worker is loaded from cdnjs.cloudflare.com.

In your code update path to the worker to be for example /pdf.worker.js

(<any>window).pdfWorkerSrc = '/pdf.worker.js';
This should be set before pdf-viewer component is rendered.

But there will still be a problem, that is, in the project ios signature is displayed on the phone does not come out, the problem has not been found, so this program is useless, but in his signature written inside the demo can be displayed, possibly the project affects a number of plug-ins, this post-study time to add.