Text of the PDF is messing up

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 lack of documentation over those functionalities Im using pdfjsViewer.PDFPageView and it gives this behavior now 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 );

    pdfPageView.setPdfPage( pdfPage );
   
    return pdfPageView.draw();
  },

i have seen some of them asked this question in here. but the authors are closing those issues without giving a proper answer ! therefore please dont close these kinda of issue which users are facing.

Configuration:

Web browser and its version: Chrome 78.0.3904.108 Operating system and its version: Mac OS 10.15 PDF.js version:2.3.200 Is a browser extension: No

Steps to reproduce the problem:

1. Code using pdfviewer.pdfpageview option

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 );

   pdfPageView.setPdfPage( pdfPage );
  
   return pdfPageView.draw();
 },

1. Open the PDF document
2. grey colored text appears with main text ( duplication of same text in the page twice)

What is the expected behavior? correct pdf document to view ( it works when i removed textLayerFactory: new pdfjsViewer.DefaultTextLayerFactory() )

What went wrong?

Link to a viewer (if hosted on a site other than mozilla.github.io/pdf.js or as Firefox/Chrome extension): None, Private Env

[Snuffleupagus]

Please keep in mind that this is, first and foremost, an open source bug tracker and not a general support forum; hence everyone opening an issue are required to provide actionable information.

Given that the “pageviewer” example linked to above does work, that would suggest an error in your code (e.g. that you didn’t include the pdf_viewer.css file in your HTML code); hence why https://github.com/mozilla/pdf.js/issues/11379#issuecomment-561066363 specifically asked you to provide a runnable example here.

[Snuffleupagus]

The only suggestion here would be to refer to the “pageviewer” example in https://github.com/mozilla/pdf.js/tree/master/examples/components

---

However, this issue is currently missing all of required information necessary for it to be valid, and as-is it will be closed as INCOMPLETE.

First of all, you need to provide all of the details requested in https://github.com/mozilla/pdf.js/blob/master/.github/ISSUE_TEMPLATE.md; and please also see https://github.com/mozilla/pdf.js/blob/master/.github/CONTRIBUTING.md (emphasis mine):

If you are developing a custom solution, first check the examples at https://github.com/mozilla/pdf.js#learning and search existing issues. If this does not help, please prepare a short well-documented example that demonstrates the problem and make it accessible online on your website, JS Bin, GitHub, etc. before opening a new issue or contacting us on the IRC channel – keep in mind that just code snippets won’t help us troubleshoot the problem.