How to render text layer

[mzabriskie]

I am trying to render the text content of a PDF as is done here. I wasn't able to find an exposed API that would support this, event though #858 makes reference to page.renderTextLayer. Digging through the source I was able to find page.getTextContent and was able to get PDFJS.renderTextLayer by including src/display/text_layer.js in my source. Even then the text layer doesn't render as expected.

Two questions:

1. Why does the PDF text layer render incorrectly (example | source)?
2. Why isn't renderTextLayer exposed on either the page or PDFJS objects?

[brendandahl]

1. You need some more css. Checkout our main viewer for examples.
   But overall add a .textLayer class to your wrapping div and make it relative or absolute and

.textLayer > div { 
   position: absolute;
}

2. Not positive what the above is asking, but it is exposed on PDFJS just not documented. We should probably move it to api.js and add some docs there.

[Snuffleupagus]

I'd suggest looking into using the viewer components, see https://github.com/mozilla/pdf.js/tree/master/examples/components, which are intended to simplify building a custom viewer.

[mzabriskie]

@brendandahl thanks for your response. I could have sworn that I already tried that, but sure enough it did the trick 🤦

Aso for PDFJS.renderTextLayer it doesn't exist unless I include src/display/text_layer.js in my project. I am getting PDFJS from pdfjs-dist/build/pdf.js using the pdfjs-dist npm module.

[yurydelendik]

Aso for PDFJS.renderTextLayer it doesn't exist unless I include src/display/text_layer.js in my project. I am getting PDFJS from pdfjs-dist/build/pdf.js using the pdfjs-dist npm module.

@mzabriskie it shall be included in pdfjs-dist's pdf.js, see https://github.com/mozilla/pdfjs-dist/blob/master/build/pdf.js#L5373

[yurydelendik]

Also find all needed CSS at https://github.com/mozilla/pdfjs-dist/blob/master/web/pdf_viewer.css

[mzabriskie]

You're correct PDFJS.renderTextLayer exists in the current version. I was apparently using an older version. Updating to latest version solves my problem. Thanks again for your help!

[nurtureJamesTan]

why is this function not in page element?

[pangguoming]

Hello，guys，i know how to do that.
1、incllude CSS file in your page
<link rel="stylesheet" href="../../node_modules/pdfjs-dist/web/pdf_viewer.css">
2、create a text layer div with the following code
<div id="textlayer"></div>
3、replace js code: page.render(renderContext); to the following code

page.render(renderContext).then(() => {
          return page.getTextContent();
        }).then((textContent) => {
          // 创建文本图层div
          const textLayerDiv = document.getElementById('textlayer');
          textLayerDiv.setAttribute('class', 'textLayer');
          // 创建新的TextLayerBuilder实例
          var textLayer =  pdfjsLib.renderTextLayer({
            textContent: textContent,
            container: textLayerDiv,
            viewport: viewport
          });
          textLayer._render();
          //textLayer.setTextContent(textContent);
          //textLayer.render();
        });

[dxc-jbeck]

https://usefulangle.com/post/90/javascript-pdfjs-enable-text-layer