PDFJS:PDF文本呈现时出错 [英] PDFJS: error on Text rendering for the PDF
问题描述
最近,PDF渲染出现了一个混乱的文本层,其中的文本与灰色覆盖层重复.
不知道如何解决它,因为当我删除textLayerFactory: new pdfjsViewer.DefaultTextLayerFactory()
时,它工作正常.但是需要这样做,就好像没有将其渲染为图像一样,这对于大型文档来说会花费很多时间
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
我正在使用pdfjsViewer.PDFPageView
Im using 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();
},
我见过同样的问题,它的角度 我在此处导入他的图像作为参考,以对该问题进行更多的解释
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
已报告的问题 PDFJS:文本层渲染两次
推荐答案
在新的PDFjs中,需要从node_modules文件夹中分别添加CSS文件.因此我将其添加为
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' );
,您也可以将其添加为html导入.
and you can add this as a html import as well.
<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
more information about the example from PDFjs https://github.com/mozilla/pdf.js/blob/master/examples/components/pageviewer.html
这篇关于PDFJS:PDF文本呈现时出错的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!