Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

customTextRenderer occasionally inserts HTML content into the <br> tags generated by PDF.js #1173

4 tasks done
etripier opened this issue Nov 16, 2022 · 5 comments
4 tasks done
bug Something isn't working


Copy link

Before you start - checklist

  • I followed instructions in documentation written for my React-PDF version
  • I have checked if this bug is not already reported
  • I have checked if an issue is not listed in Known issues
  • If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo


PDF.js inserts a DOM node containing the associated text content if present:

It then inserts a <br> element if hasEOL is also true for the same associated text content:

Because the behavior of react-pdf is to iterate through each element of text content and then assume that the DOM node found by index is the only associated DOM node, the count drifts every time an element of text content with length and hasEOL is hit.

I implemented a disgusting hack that looks like

const textContentItems = [...textContent.items].flatMap((textContentItem) =>
  textContentItem.hasEOL && textContentItem.str
    ? [textContentItem, null]
    : [textContentItem]

textContentItems.forEach(function (item, itemIndex) {
  if (!item) {

Lmk what you think! Love the ease-of-use of this component.

Steps to reproduce

All the PDF examples I have are confidential but I can try to create one if requested.

  1. Load PDF containing multi-line statements such that PDF.js parses one line with str present and hasEOL: true.
  2. customTextRenderer={({ str }) => str}
  3. Select all text on page, doesn't match.

Expected behavior

Text selection should match.

Actual behavior

Text selection doesn't match.

Additional information

No response


  • Browser (if applicable): Chrome
  • React-PDF version: 6.1.0
  • React version: 16.8
  • Webpack version (if applicable):
@etripier etripier added the bug Something isn't working label Nov 16, 2022
Copy link

Hi @etripier - Thank you for raising it, I just experienced the same issue. Do you know if there is a workaround to get through it until @wojtekmaj get a chance to take a look ;)

Copy link

wojtekmaj commented Nov 17, 2022

I don't get it. The length of textContent.items matches the number of rendered children on text layer. If it has hasEOL false, it's going to be a span, if true, then br. I double checked that and added more unit tests in 7c1c925 to ensure that and I'm still unable to reproduce. Perhaps the sample PDF we have doesn't have this issue?

Copy link

There is a similar issue reported here #1042

I am experiencing the same issue using this pdf file -

And I am running a simple demo based on this code base but upgrade the react-pdf to 6.1.0 and applied the customTextRenderer like below

function Row({ index, style }) {
  function onPageRenderSuccess(page) {
    console.log(`Page ${page.pageNumber} rendered`);

  return (
    <div style={style}>
      <Page onRenderSuccess={onPageRenderSuccess} pageIndex={index} customTextRenderer={({ str }) => str}/>


Copy link

@wojtekmaj The issue is specifically that some tokens containing text and a line break will render both a <span> and a <br>, meaning that the number of rendered elements no longer matches 1-1 with the input. You can see the conditions that lead to this result here.

Copy link

Thanks guys for all the info - this really helped me out! v6.1.1 released.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
bug Something isn't working
None yet

No branches or pull requests

3 participants