工作学习总结--ng2-pdf-viewer的运用

最近有一个展示pdf文件的需求,而且还要展示合同中的签章,所以查了好多资料,先是用了pdf.js,但是在安卓手机闪退,所以又尝试了ng2-pdf-viewer这个插件,虽然在ios手机上签章展示不出来,最后还是使用了pdf.js,但我还是想把这次尝试的过程记录下来。来吧,进入正题
第一步,安装ng2-pdf-viewer

npm install ng2-pdf-viewer --save

安装之后让我们看一下它的目录结构
工作学习总结--ng2-pdf-viewer的运用_第1张图片
第二步,在项目中新建页面

ionic g page pdf-viewerPage

第三步,在app.module.ts添加代码,只贴出添加的代码

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

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

第四步,html和ts中的写法
html


    

ts代码

  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,
  ) {
  //  这是重点
    (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之后开始踩坑之路了,具体如下:
1.首先我要展示合同中的电子签章,所以要注释掉pdf.worker.min.js中的隐藏签章的地方,这个pdf.worker.min.js和pdfjs中的pdf.worker.min.js是一样的文件,可以说是同一个。所以注释掉签章部分,具体请看我另外一篇博客:工作学习总结-pdf.js的采坑和运用
2.pdf.worker.js这个文件,我很纳闷安装这个插件的时候,会自动安装pdfjs‑dist插件,他却通过CDN远程调用pdf.worker.js。还好插件的说明文档给了相关提示,查阅源码的时候发现果然如此。(借用的)
工作学习总结--ng2-pdf-viewer的运用_第2张图片
所以我在当前页面代码中添加了这样一行代码(重点)

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

这个就相当于使用的是本地的pdf.worker.min.js,而不是cdn外联的。
可以看一下npm中对ng2-pdf-viewer的说明,npm链接地址是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

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

但是最后还是有个问题,就是在项目中在ios手机上签章显示不出来,问题所在又没有找到,所以这个方案就没有用,但是在自己写的demo里面签章是可以显示出来的,可能是项目中的一些插件影响了,这个后期研究的时候再补充。

你可能感兴趣的:(工作学习总结,ng2-pdf-viewer)