PDFJS：PDF 文本渲染錯誤

Question

最近，PDF 渲染得到一個混亂的文本層，其中文本被灰色覆蓋層復制。 不知道如何修復它，因為當我刪除textLayerFactory: new pdfjsViewer.DefaultTextLayerFactory()它工作正常。 但需要這個好像不是渲染為圖像，這需要大量時間來處理大型文檔

我使用 pdfjsViewer.PDFPageView

我的代碼如下

 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();
  },

我已經看到了同樣的問題，它的角度我導入了他的圖像作為參考在這里給出更多關於這個問題的解釋

報告的問題PDFJS：文本層渲染兩次

Answer 1

在新的 PDFjs 中，CSS 文件需要從 node_modules 文件夾中單獨添加。 因此我將其添加為

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

您也可以將其添加為 html 導入。

<link rel="stylesheet" href="../../node_modules/pdfjs-dist/web/pdf_viewer.css">

有關 PDFjs 示例的更多信息https://github.com/mozilla/pdf.js/blob/master/examples/components/pageviewer.html