In my Vue.js application, I have the following TypeScript class:
/** 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8bfbefede1f8a6efe2f8ffcbb9a5bba5bfb3b2">[email protected]</a>/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);
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 });
}
While the PDF is loading correctly for page 1, subsequent pages show text overlapping, as seen in these images:
Page 1
https://i.stack.imgur.com/vbuMm.png
Page 2
https://i.stack.imgur.com/GwO0n.png
Page 3
https://i.stack.imgur.com/lkxq3.png
This overlapping text issue on the left side of pages 2 and 3 is something that needs further investigation to determine the root cause.
Have any ideas on what could be causing this problem?