wojtekmaj / react-pdf

Display PDFs in your React app as easily as if they were images.
https://projects.wojtekmaj.pl/react-pdf
MIT License
9.01k stars 861 forks source link

Non-alphanumeric characters with `fixed` prop #1775

Closed cox-michael closed 2 months ago

cox-michael commented 2 months ago

Before you start - checklist

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

wojtekmaj commented 2 months ago

It looks like you confused React-PDF with @react-pdf/renderer. Please file an issue in their repo instead.