javascript - PDFJS:PDF 文本呈现错误
问题描述
最近,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:文本层渲染两次
解决方案
在新的 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
推荐阅读
- javascript - 自动生成的 id 的哈希在页面加载时不起作用
- flutter - 在 Flutter 应用程序中使用 Facebook 受众网络实现 admob 中介
- web - 因为违反内容安全策略而拒绝执行内联脚本(primefaces 8)
- python - 使用循环创建多个文件夹,并在此文件夹内保存 Excel 工作表
- java - 如何在java中使用lambda表达式编写弹性搜索代码
- ios - 解压缩(.scn 模型文件),然后投影在 ARKit 中总是失败
- opencv - 如何改进我的 OpenCV 识别代码以找到上半身并在以闭路电视流作为输入的同时减少资源?
- swift - 如果已通过系统偏好设置添加或删除打印机,如何获取通知
- .net - 如何设置 DotNetty(Netty) Bootstrap.ConnectAsync 超时?
- java - 单击时在 JSpinner 中选择部分文本