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

    } );

  },

我已经看到了同样的问题，它的角度是我导入他的图像作为参考在这里给出关于这个问题的更多解释

Answer 1

在新的 PDFjs 中，CSS 文件需要从 node_modules 文件夹中单独添加。因此我将其添加为&nbsp;&nbsp;app.import(&nbsp;'node_modules/pdfjs-dist/web/pdf_viewer.css'&nbsp;);您也可以将其添加为 html 导入。<link&nbsp;rel="stylesheet"&nbsp;href="../../node_modules/pdfjs-dist/web/pdf_viewer.css">有关 PDFjs 示例的更多信息&nbsp;https://github.com/mozilla/pdf.js/blob/master/examples/components/pageviewer.html