带有文字选择的pdf.js

如何使PDF中的文本可选？

在这里尝试过。 PDF写得很好，但没有文字选择

https://github.com/mozilla/pdf.js

https://github.com/mozilla/pdf.js/blob/master/web/text_layer_builder.css https://github.com/mozilla/pdf.js/blob/master/web/text_layer_builder.js 'use strict'; PDFJS.getDocument('file.pdf').then(function(pdf){ var page_num = 1; pdf.getPage(page_num).then(function(page){ var scale = 1.5; var viewport = page.getViewport(scale); var canvas = document.getElementById('the-canvas'); var context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; var canvasOffset = $(canvas).offset(); var $textLayerDiv = $('#text-layer').css({ height : viewport.height+'px', width : viewport.width+'px', top : canvasOffset.top, left : canvasOffset.left }); page.render({ canvasContext : context, viewport : viewport }); page.getTextContent().then(function(textContent){ var textLayer = new TextLayerBuilder({ textLayerDiv : $textLayerDiv.get(0), pageIndex : page_num - 1, viewport : viewport }); textLayer.setTextContent(textContent); textLayer.render(); }); }); });  
  
 
  

Answer 1

您的JavaScript代码非常完美。 您只需要包含Text Layer Builder所依赖的UI实用程序：

https://github.com/mozilla/pdf.js/blob/master/web/ui_utils.js

或者在HTML中：

---

如果您运行代码（没有ui_utils）并检查调试控制台 ，您将看到ReferenceError: CustomStyle is not defined 。 在PDFjs的repo中 快速搜索将显示它在ui_utils.js中定义。

这是我的最小但完整的代码供您参考。 我在这里使用PDFjs的演示pdf。 请注意，在生产中，您不应链接到raw.github。

Answer 2

经过几个小时的努力，我发现这篇文章对于选择文本和使用没有节点的pdf.js非常有帮助。 使用Mozilla的PDF.Js在JavaScript中自定义PDF渲染

Answer 3

您好，您已在HTML内容中创建了canvas。

Canvas不支持文本选择，因此您需要将canvas更改为其他方式。