java呈现pdf时出错,PDFJS：PDF文本呈现时出错

Recently the PDF rendering get a messed up text layer where text gets duplicated with the grey colored overlay.

No idea about how to fix it as when i remove textLayerFactory: new pdfjsViewer.DefaultTextLayerFactory() it works fine. but need this as if not is render as images which takes a lot of time for large documents

Im using pdfjsViewer.PDFPageView

my code as follows

getPdf() {

var pdfDocument;

if ( this._state !== 'inDOM' ) return false;

pdfjsLib.disableRange = true;

pdfjsLib.disableStream = true;

let self = this;

pdfDocument = pdfjsLib.getDocument(this.src);

pdfDocument.promise.then(function(pdf) {

self.set( 'pdfDocument', pdf );

self.set( 'maxNumPages', pdf.numPages );

self.set( 'prevBtnDisabled', true );

self.set( 'documentRendered', true );

self.setViewportWidth();

self.renderPdf();

});

return pdfDocument;

},

renderPdf() {

var pdf = this.pdfDocument,

maxNumPages,

pagePromise;

if ( !pdf ) return false;

maxNumPages = this.maxNumPages;

pagePromise = this.getAndRenderPage( pdf, 1 );

Array.apply( null, new Array( maxNumPages - 1 ) ).forEach( ( value, index ) => {

pagePromise = pagePromise.then( () => this.getAndRenderPage( pdf, index + 2 ) );

} );

},

getAndRenderPage( pdf, index ) {

return pdf.getPage( index ).then( page => this.renderPage( page, index ) );

},

renderPage( pdfPage, pageNum ) {

var parentWidth = this.$().parent().width(),

pageViewportScale = ( parentWidth >= this.get( 'breakpoints.mobile' ) ) ? 1.5 : 1.3,

viewport = pdfPage.getViewport( { scale: parentWidth / pdfPage.getViewport( { scale: pageViewportScale } ).width } ),

container = this.$().find( '.pdf_viewer--container' )[ 0 ],

pdfPageView;

pdfPageView = new pdfjsViewer.PDFPageView( {

container: container,

id: pageNum,

scale: viewport.scale,

defaultViewport: viewport,

textLayerFactory: new pdfjsViewer.DefaultTextLayerFactory()

} );

var pages = this.get('pages');

// Associates the actual page with the view, and drawing it

pages.push( pdfPageView );

this.set( 'pages', pages );

this.set( 'scale', viewport.scale );z

pdfPageView.setPdfPage( pdfPage );

return pdfPageView.draw();

},

i have seen same kind of questioned asked and its for angular

Im importing his image as for the reference in here to give a more explanation about the issue

解决方案

in the new PDFjs, the CSS file needs to be added seperately from the node_modules folder. therefore i added this as

app.import( 'node_modules/pdfjs-dist/web/pdf_viewer.css' );

and you can add this as a html import as well.