Question

我的vue.js应用程序中有以下打字稿类。

/** Taken from https://github.com/VadimDez/ng2-pdf-viewer/blob/master/src/app/pdf-viewer/pdf-viewer.component.ts */
import { Component, Vue } from 'vue-property-decorator';

import { PDFDocumentProxy, PDFViewerParams, PDFSource, PDFPromise } from 'pdfjs-dist';

let PDFJS: any;
let PDFJSViewer: any;


PDFJS = require('pdfjs-dist/build/pdf');
PDFJSViewer = require('pdfjs-dist/web/pdf_viewer');


@Component
export default class FileViewer extends Vue {

public pdfLinkService: any;
public pdfViewer: any;
public pdfFindController: any;
private _renderText: boolean = true;
private _externalLinkTarget: string = 'blank';
private _pdf: PDFDocumentProxy;
private src: string | Uint8Array | PDFSource = "http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf";
private cMapsUrl: string = 'https://unpkg.com/pdfjs-dist@2.0.489/build/pdf.js';


mounted(){
    this.setupViewer();
}
static getLinkTarget(type: string) {
    switch (type) {
      case 'blank':
        return (<any>PDFJS).LinkTarget.BLANK;
      case 'none':
        return (<any>PDFJS).LinkTarget.NONE;
      case 'self':
        return (<any>PDFJS).LinkTarget.SELF;
      case 'parent':
        return (<any>PDFJS).LinkTarget.PARENT;
      case 'top':
        return (<any>PDFJS).LinkTarget.TOP;
    }

    return null;
}
static setExternalLinkTarget(type: string) {
    const linkTarget = FileViewer.getLinkTarget(type);

    if (linkTarget !== null) {
      (<any>PDFJS).externalLinkTarget = linkTarget;
    }
}
private getDocumentParams() {
    const srcType = typeof(this.src);

    // if (!this._cMapsUrl) {
    //   return this.src;
    // }

    const params: any = {
      cMapUrl: this.cMapsUrl,
      cMapPacked: true
    };

    if (srcType === 'string') {
      params.url = this.src;
    } else if (srcType === 'object') {
      if ((this.src as any).byteLength !== undefined) {
        params.data = this.src;
      } else {
        Object.assign(params, this.src);
      }
    }

    return params;
}

loadPDF(){


    const loadingTask: any = (PDFJS as any).getDocument(this.getDocumentParams());

    (<PDFPromise<PDFDocumentProxy>>loadingTask.promise)
    .then((pdf: PDFDocumentProxy) => {
        if (this._pdf) {
            this._pdf.destroy();
        }
        this._pdf = pdf;
        this.pdfViewer.setDocument(pdf);

    }, (error: any) => {
        console.log(error);
    });
}

destroy(){
    this._pdf.destroy();
}

public setupViewer() {
    (PDFJS as any).disableTextLayer = !this._renderText;

    FileViewer.setExternalLinkTarget(this._externalLinkTarget);

    this.pdfLinkService = new PDFJSViewer.PDFLinkService();

    let container = document.getElementById('viewerContainer');
    const pdfOptions: PDFViewerParams | any = {
      container: container,
      removePageBorders: false
    //   linkService: this.pdfLinkService
    }

    this.pdfViewer = new PDFJSViewer.PDFViewer(pdfOptions);
    this.pdfLinkService.setViewer(this.pdfViewer);
    this.pdfFindController = new PDFJSViewer.PDFFindController({ pdfViewer: this.pdfViewer });
    this.pdfViewer.setFindController(this.pdfFindController);
    this.loadPDF();
}    
doSomething(){
    this.pdfFindController.executeCommand('find', { query: 'trace', highlightAll: true });
}

}

我得到了pdf加载，但不是100％正确。如下图所示。

第1页

如您所见，它看起来非常完美。但是问题从第2页开始。

第2页

第3页

如左侧所示，有些文本以某种方式重叠。我不知道这可能是什么原因。

有什么想法吗？

Answer 1

这是由于未加载pdf viewer css文件。

Pdfjs打字稿。 PDF正在加载但已损坏

1 个答案: