react-pdf icon indicating copy to clipboard operation
react-pdf copied to clipboard

Non-alphanumeric characters with `fixed` prop

Open cox-michael opened this issue 2 months ago • 0 comments

Before you start - checklist

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

Description

Symbols like the copyright symbol do not render on wrapped pages when using the fixed prop, but the rest of the text renders just fine.

Steps to reproduce

  1. Make a page with enough content to wrap it at least once.
  2. Add in my Footer component at the bottom
export function Footer() {
  return (
    <View
      fixed
      style={{
        position: "absolute",
        bottom: 0,
        left: 0,
        width: 595,
        padding: "18px 25px",
        display: "flex",
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
      }}
    >
      <View>
        <Text style={{ fontSize: 7 }}>
          © Company Name. All Rights Reserved.
        </Text>

        {/* page counter goes here */}
      </View>
    </View>
  );
}

Expected behavior

© Company Name. All Rights Reserved. should render on the bottom of every page.

Actual behavior

© Company Name. All Rights Reserved. is rendered on the bottom of the first page and subsequent pages only render Company Name. All Rights Reserved. (without the copyright symbol).

Additional information

I was able to get around it by utilizing the render prop:

<Text
  style={{ fontSize: 7 }}
  render={() => "© Company Name. All Rights Reserved."}
/>

Environment

  • @react-pdf/renderer version: 3.1.12
  • React version: 18.2.0

cox-michael avatar Apr 30 '24 19:04 cox-michael