pdf在线预览 ng2-pdf-viewer的运用

angular项目在线预览PDF

1 安装 ng2-pdf-viewer

yarn add ng2-pdf-viewer

 

2 在项目中添加

import { NgModule } from '@angular/core';
import { PdfViewerModule } from 'ng2-pdf-viewer';
import { DemoComponent } from './pages/demo/demo.component';

@NgModule({
  imports: [
    PdfViewerModule,
  ],
  declarations: [
    DemoComponent,
  ],
  providers: [],
})
export class PortalModule { }

 

3 在组件中添加

html代码

<pdf-viewer [src]="pdfSrc" [c-maps-url]="cMapsUrl" [render-text]="true" style="display: block;"
  (after-load-complete)="fileLoadCompeleted()" (error)="onError()"></pdf-viewer>

ts代码

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.less']
})
export class DemoComponent implements OnInit {

  @Input() file;
  @Input() pdfSrc: string = '';
  cMapsUrl = '/assets/plugins/pdfjs/cmaps/';

  constructor(private message: MessageService, private authService: AuthService) {
    (<any>window).pdfWorkerSrc = '/assets/plugins/pdfjs/pdf.worker.min.js?v=2.5.207';  // 引用pdfjs-dist下的文件
  }
  private loader: any;

  ngOnInit() {
    this.loader = this.message.loading(`文件正在加载中，请稍候...`, { nzDuration: 0 }).data.messageId;
    const token = this.authService.getAuthorizationUrl();

    if (!Util.isUndefinedOrNull(token) && !Util.isUndefinedOrNull(this.file)) {
      this.pdfSrc = `/api/Attachment/File/Preview?id=${this.file.Id}&modCode=${this.file.ModCode}&${token}`;
    } else {
      this.onError();
    }
  }

  onError() {
    this.message.error('文件加载失败');
    setTimeout(() => {
      this.message.remove(this.loader);
    }, 1000);
  }

  fileLoadCompeleted() {
    this.message.remove(this.loader);
  }

}

4 注意事项

安装ng2-pdf-viewer插件的时候，会自动安装pdfjs‑dist插件

 

查看官方文档 https://www.npmjs.com/package/ng2-pdf-viewer

查看源码发现

 

(<any>window).pdfWorkerSrc = '/assets/plugins/pdfjs/pdf.worker.min.js?v=2.5.207'; 
相当于使用的是本地的pdf.worker.min.js，而不是cdn外联的

 

想兼容ie11，就使用es5文件夹下的pdf.worker.js

 

5 使用 pdf.js 查看发票时，显示不了台头和印章的解决办法

在 pdf.worker.js 文件中，有这么一个判断：

if (data.fieldType === 'Sig') {
     this.setFlags(AnnotationFlag.HIDDEN);
}

把这三行代码注释掉就好了。

 

一些资料网站

https://pdfjs.express