Deprecated API usage: renderTextLayer, please use TextLayer instead.

[JHarrisGTI]

Upon upgrading to pdfjs-dist 4.3.136, my text layers have vanished. I see this in the console:

Deprecated API usage: `renderTextLayer`, please use `TextLayer` instead.

I would like to switch over to the new API. I haven't been able to find any documentation for TextLayer; it was added in this PR, which mentions that TextLayer is similar to AnnotationLayer, but I haven't been able to find docs for that either.

Here's the code I've been using so far for rendering text in my app:

const textContent = await this.pdfPage.getTextContent();
this.textLayer.style.setProperty('--scale-factor', this.viewport.scale.toString());

renderTextLayer({
	textContentSource: textContent,
	viewport: this.viewport,
	container: this.textLayer,
});

this.viewport is set to this.pdfPage.getViewport(); this.textLayer is a reference to a <div> on the page.

I replaced the renderTextLayer() call with this:

const textLayer = new TextLayer({
	textContentSource: textContent,
	viewport: this.viewport,
	container: this.textLayer,
});
await textLayer.render();

This makes the console warning go away, which is good progress, but my text layer still doesn't show up.

How should I go about troubleshooting this? Am I on the right track with new TextLayer? Is there an example I should look at?

[timvandermeij]

I think this uage of TextLayer should be correct at first glance, but it's difficult to tell without a reduced reproducible example. Could you prepare e.g. a JSFiddle, or provide a minimal reproducer here, without any other dependencies except for PDF.js that shows the issue? If the problem can be reproduced in isolation with only vanilla PDF.js, we can at least tell that it's not due to e.g. other code or libraries interfering and it will help further debugging.

[JHarrisGTI]

While creating my example, I figured the problem out. The text layer is still present in the DOM, it's just hidden behind the canvas. The new version has some CSS that sets the z-index of .textLayer to 0. Adding .textLayer { z-index: 1; } to my CSS fixed the problem.

[nsadeh]

I also ran into this issue. I have to say it is extremely frustrating, there's almost no documentation of any of this stuff so I have to rely on old examples that don't work and then I run into issues like this. The APIs are incredibly leaky, like @JHarrisGTI shows, unless you know which CSS attributes to work the whole thing just doesn't do anything and fails silently. I am actually baffled that there are working examples of this library on the internet, they must have spent months banging their heads against the wall to get it working

[calixteman]

@nsadeh, Please remember that pdf.js is available for free and is maintained by some contributors who are working for free on their spare time. Personally, my main focus is to maintain and develop the Firefox pdf viewer.
I can understand frustration, but pdf.js is an open project you can contribute to improve and make things better for other users. So if you want to make a PR (or more) to improve documentations, examples, ... please feel free to do it.

[nsadeh]

I apologize for the tone of my comment, I was just incredibly frustrated today trying to work with this library and experiencing undocumented, deprecated APIs and leaky abstractions. I saw the Mozilla name and thought that it was officially supported by Mozilla like so many of the great web APIs I use.

[pengfu]

const textLayer = new TextLayer({
	textContentSource: this.pdfPage.streamTextContent(),
	viewport: this.viewport,
	container: this.textLayer,
});
await textLayer.render();

It is OK ，pay attent to the textContentSource parameter