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

巴特西